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