CSSで左余白を設定する方法-CSSチュートリアル-php.cn

CSSで左余白を設定する方法

青灯夜游

リリース： 2023-01-06 11:12:37

オリジナル

23624 人が閲覧しました

CSS で左マージンを設定する方法: 1. margin-left 属性を使用して要素の左マージンを設定します。構文形式は「margin-left:margin value;」です。2. padding-left 属性。「padding-left:margin value;」という構文形式で要素の左パディングを設定できます。

CSSで左余白を設定する方法

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

1. margin-left を使用して左マージンを設定します。

margin-left 属性は、要素の左マージンを設定します。

注: 負の値も許可されます。

属性値:

値	説明
auto	ブラウザによって設定された左マージン。
length	固定左マージンを定義します。デフォルト値は 0 です。
%	親オブジェクトの合計幅に基づいて、左マージンをパーセンテージとして定義します。

#例:

<!DOCTYPE html>
<html> 
	<head>
		<meta charset="utf-8" />
		<style type="text/css">
			p.leftmargin {
				margin-left: 1cm;
			}
		</style>
	</head>

	<body>
		<p>这个段落没有指定左边距。</p>
		<p class="leftmargin">这个段落带有指定的左外边距。</p>
	</body>

</html>

ログイン後にコピー

CSSで左余白を設定する方法

2.padding-left を使用して左内側のマージンを設定します

padding-left 属性は、要素の左パディングを設定します。

注: 負の値は許可されません。

属性値:

値説明固定の左パディング値をピクセル、センチメートルなどの特定の単位で指定します。デフォルト値は 0px です。親要素の幅に基づいて左パディングの割合を定義します。この値は、すべてのブラウザーで期待どおりに機能するわけではありません。


length
%

例:

<!DOCTYPE html>
<html> 
	<head>
		<meta charset="utf-8" />
		<style type="text/css">
			p.leftpadding {
				margin-left: 1cm;
			}
		</style>
	</head>

	<body>
		<p>这个段落没有指定左边距。</p>
		<p class="leftpadding">这个段落带有指定的左内边距。</p>
	</body>

</html>

ログイン後にコピー

CSSで左余白を設定する方法