CSSマージンの設定方法-CSSチュートリアル-php.cn

CSSマージンの設定方法

青灯夜游

リリース： 2023-01-05 16:13:13

オリジナル

17032 人が閲覧しました

CSS でマージンを設定する方法: 1. margin 属性を使用して外側のマージンを設定し、要素の周囲のスペースを定義します。これにより、ブロックレベルの要素間の距離を制御できます。2. padding 属性を使用して、内側のマージンを設定し、要素を定義します。境界線と要素のコンテンツの間のスペース。

CSSマージンの設定方法

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

CSS でマージンを設定する方法:

margin 属性で外側のマージンを設定
padding 属性で内側のマージンを設定

CSSマージンの設定方法

方法: margin 属性を使用してマージンを設定します。

margin 属性は要素の周囲のスペースを定義し、ブロックレベルを制御します要素間の距離。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style>
			p {
				background-color: yellow;
			}
			
			p.margin {
				margin: 100px 50px;
			}
		</style>
	</head>

	<body>
		<p>这是一个没有指定边距大小的段落。</p>
		<p>这是一个没有指定边距大小的段落。</p>
		<p class="margin">这是一个指定边距大小的段落：上下边距100px，左右边距50px。</p>
		<p>这是一个没有指定边距大小的段落。</p>
	</body>

</html>

ログイン後にコピー

レンダリング:

CSSマージンの設定方法

Margin は省略された属性で、1 ～ 4 つの値を持つことができます:

margin:25px 50px 75px 100px;

ログイン後にコピー

上マージンは 25px
右マージンは 50px
下マージンは 75px
左マージンは 100px

margin:25px 50px 75px;

ログイン後にコピー

上マージンは 25px
左と右余白は 50px
下の余白は 75px

margin:25px 50px;

ログイン後にコピー

```
margin:25px;
```
ログイン後にコピー

方法 2: パディング属性を使用してパディングを設定します。

##パディングプロパティは、要素の境界線と要素の内容の間のスペース、つまり上、下、左、および要素の間のスペースを定義します。右のパディング。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style>
			p {
				background-color: yellow;
				width: 400px;
			}
			
			p.padding {
				padding: 100px 50px;
			}
			span{
				background-color: peachpuff;
			}
		</style>
	</head>

	<body>
		<p>这是一个没有指定边距大小的段落。</p>
		<p>这是一个没有指定边距大小的段落。</p>
		<p class="padding"><span>这是一个指定边距大小的段落：上下内边距100px，左右内边距50px。</span></p>
		<p>这是一个没有指定边距大小的段落。</p>
	</body>

</html>

ログイン後にコピー

レンダリング:

padding は省略形の属性で、1 から 4 つの値を持つことができます: