CSSマージン（余白）
CSS Margin (マージン)
CSS Margin (マージン) プロパティは、要素の周囲のスペースを定義します。
Margin
marginは、要素の周囲の領(lǐng)域（外側(cè)の境界線）をクリアします。マージンには背景色がなく、完全に透明です
マージンは要素の上下左右のマージンを個(gè)別に変更できます。すべてのプロパティを一度に変更することも可能です。単位には、ピクセル、ピクセル、パーセンテージ、センチメートルなどを使用できます
CSS margin プロパティ
CSS では、異なる辺に異なる余白を指定できます
| プロパティ | 説明 |
|---|---|
| margin | 略語屬性。すべてのマージン プロパティを 1 つのステートメントで設(shè)定します。 |
| margin-bottom | 要素の下マージンを設(shè)定します。 |
| margin-left | 要素の左マージンを設(shè)定します。 |
| margin-right | 要素の右マージンを設(shè)定します。 |
| margin-top | 要素の上マージンを設(shè)定します。 |
例
異なる側(cè)にマージンを設(shè)定します
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
p
{
background-color:yellow;
}
p.margin
{
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
}
</style>
</head>
<body>
<p>這是一個(gè)沒有指定邊距大小的段落。</p>
<p class="margin">這是一個(gè)指定邊距大小的段落。</p>
</body>
</html>プログラムを?qū)g行して試してください
Margin - 短縮屬性
コードを短縮するには、使用可能屬性中央マージン 指定されたすべてのマージン プロパティ。これを略語屬性と呼びます。
すべての margin プロパティの省略形プロパティは「margin」です:
例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
p
{
background-color:yellow;
}
p.margin
{
margin:100px 50px;
}
</style>
</head>
<body>
<p>這是一個(gè)沒有指定邊距大小的段落。</p>
<p class="margin">這是一個(gè)指定邊距大小的段落。</p>
</body>
</html>プログラムを?qū)g行して試してください
margin プロパティは 1 ～ 4 つの値を持つことができます
マージン: 25px 50px 75px 100px;
上マージンは25px
右マージンは50px
下マージンは75px
左マージンは100px
マージン:25px 50px ;
上部の余白約25pxです
マージンは50pxです
下のマージンは75pxです
margin: 25px 50px;
all 4つのマージンはすべて25pxです
その他の例
余白を設(shè)定するセンチメートルとパーセンテージの値を使用します
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PHP中文網(wǎng)（php.cn）</title>
<style>
p{background-color: #8de943
}
p.ex1 {margin-top:2cm;}
p.bottommargin {margin-bottom:25%;}
</style>
</head>
<body>
<p>一個(gè)沒有指定邊距大小的段落。</p>
<p class="ex1">一個(gè)2厘米上邊距的段落。</p>
<p class="bottommargin">這是一個(gè)用百分比設(shè)置的下邊距大小的段落。</p>
</body>
</html>プログラムを?qū)g行して試してください
