CSSで上下の間隔を設定する方法-CSSチュートリアル-php.cn

CSSで上下の間隔を設定する方法

青灯夜游

リリース： 2023-02-17 16:07:49

オリジナル

16041 人が閲覧しました

CSS で上下の間隔を設定する方法: 1. line-height 属性を使用して、上下の間隔を設定します (構文 "line-height: spacing value;"; 2. margin を使用します) -top 属性と margin-bottom 属性を使用して、それぞれ上部と下部の間隔を設定します。間隔、構文は "margin-top: 上部の間隔の値; margin-bottom: 下部の間隔の値;"; 3. padding-top と padding- を使用します。 Bottom 属性を使用して、上部と下部の間隔をそれぞれ設定します。

CSSで上下の間隔を設定する方法

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

1. line-height 属性を使用して、上下の間隔を設定します。

line-height 属性は、行間の距離 (行の高さ) を設定するために使用します。、テキスト行と行の間の距離を制御できます。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style type="text/css">
			div{
				width: 200px;
				border: 1px solid red;
			}
			.abc {
				line-height: 50px;
			}
		</style>
	</head>

	<body>
		<div >
			<p>第一段</p>
			<p>第二段</p>
			<p>第三段</p>
			<p>第四段</p>
		</div><br>
		<div class="abc">
			<p>第一段</p>
			<p>第二段</p>
			<p>第三段</p>
			<p>第四段</p>
		</div>
	</body>

</html>

ログイン後にコピー

レンダリング:

CSSで上下の間隔を設定する方法

説明:

実装の高さ (行間隔) は、基本的に上部の行間隔を超えます。は、テキストの高さ (テキストの上端から下端までの距離) ではなく、下端の間隔によって制御されます。テキストのピクセル数が 16px の場合、行の高さが大きくなると、テキストのピクセル数は変わりませんが、テキストの上下の間隔が変わります。行の高さが 26 ピクセルの場合、上部と下部の間隔はそれぞれ 5 ピクセルです。つまり、行の高さを増やしても、上部と下部の間隔は増えるだけです。

ヒント: 複数行テキストの行の高さは、実際にはテキスト行の下端から次のテキスト行の下端までです。

CSSで上下の間隔を設定する方法

##2. margin-top プロパティと margin-bottom プロパティを使用して、上部と下部の間隔を設定します。

# margin-top プロパティは、上部の余白を設定します。要素。
margin-bottom 属性は、要素の下マージンを設定します。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style type="text/css">
			div{
				width: 200px;
				border: 1px solid red;
			}
			.abc p {
				margin-top:50px; 
				margin-bottom:50px;
			}
		</style>
	</head>

	<body>
		<div >
			<p>第一段</p>
			<p>第二段</p>
			<p>第三段</p>
			<p>第四段</p>
		</div><br>
		<div class="abc">
			<p>第一段</p>
			<p>第二段</p>
			<p>第三段</p>
			<p>第四段</p>
		</div>
	</body>

</html>

ログイン後にコピー

レンダリング:

CSSで上下の間隔を設定する方法

3.padding-top 属性とpadding-bottom 属性を使用して上部と下部を設定します。 spacing

padding-top 属性は、要素の上部のパディング (スペース) を設定します。
padding-bottom 属性は、要素の下部パディング (スペース) を設定します。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style type="text/css">
			div{
				width: 200px;
				border: 1px solid red;
			}
			.abc p {
				padding-top:30px; 
				padding-bottom:30px;
			}
		</style>
	</head>

	<body>
		<div >
			<p>第一段</p>
			<p>第二段</p>
			<p>第三段</p>
			<p>第四段</p>
		</div><br>
		<div class="abc">
			<p>第一段</p>
			<p>第二段</p>
			<p>第三段</p>
			<p>第四段</p>
		</div>
	</body>

</html>

ログイン後にコピー

CSSで上下の間隔を設定する方法