マージンとパディングの指定方法
マージン（余白）とパディング（詰め物的な余白）の指定方法を説明します。マージンとパディングは両方とも余白ですが、
- マージンは、ボーダーよりも外側の余白
- パディングは、ボーダーよりも内側の余白
である点が異なります。
marginプロパティ
マージンを定義するには、marginプロパティを使用します。値には、数値を指定します。
マージンの上下左右を個別で指定するには、
- margin-top
- margin-right
- margin-bottom
- margin-left
を使用します。
h1 {
margin: 100px;
border: solid;
}
h2 {
margin: 10mm;
border: solid;
}
h3 {
margin-left: 100px;
border: solid;
}
h4 {
margin-right: 200px;
margin-left: 200px;
border: solid;
}
paddingプロパティ
パディングを定義するには、paddingプロパティを使用します。値には、数値を指定します。
パディングの上下左右を個別で指定するには、
- padding-top
- padding-right
- padding-bottom
- padding-left
を使用します。
h1 {
padding: 100px;
border: solid;
}
h2 {
padding: 10mm;
border: solid;
}
h3 {
padding-left: 100px;
border: solid;
}
h4 {
padding-right: 200px;
padding-left: 200px;
border: solid;
}
- マージン（余白）を指定するには、marginプロパティを使用
- マージンを上下左右で個別に指定するには、margin-top、margin-right、margin-bottom、margin-leftプロパティを使用
- パディング（詰め物的な余白）を指定するには、paddingプロパティを使用
- パディングを上下左右で個別に指定するには、padding-top、padding-right、padding-bottom、padding-leftプロパティを使用
|
2008 W-D-L.NET
いろいろな値
このページの先頭