Margin/Padding - 外余白・内余白
- margin〔外余白プロパティの一括指定〕
- margin-top〔要素の上外余白〕
- margin-right〔要素の右外余白〕
- margin-bottom〔要素の下外余白〕
- margin-left〔要素の左外余白〕
- padding〔内余白プロパティの一括指定〕
- padding-top〔要素の上内余白〕
- padding-right〔要素の右内余白〕
- padding-bottom〔要素の下内余白〕
- padding-left〔要素の左内余白〕
- !DOCTYPEによるブラウザのpaddingの解釈の違い
- IEとFirefox、Netscapeでのセンタリング指定の違い
margin
外余白プロパティの一括指定
unknown
marginプロパティは、要素の外側の余白をどのくらいとるか指定します。 すべての要素に指定可能です。 marginプロパティは「ショートハンド」（プロパティ一括指定）のため、デフォルト値はありません。
| 値 | 説明 |
|---|---|
| margin-topプロパティ | 要素の左外余白。 |
| margin-rightプロパティ | 要素の右外余白。 |
| margin-bottomプロパティ | 要素の下外余白。 |
| margin-leftプロパティ | 要素の上外余白。 |
マージン、パディング| 指定方法 | ショートハンド | 意味 |
|---|---|---|
| 一括指定 | maring: 5px | margin-top: 5px; margin-right: 5px; margin-bottom: 5px; margin-left: 5px; |
| 上下 左右 | margin: 5px 10px | margin-top: 5px; margin-right: 10px; margin-bottom: 5px; margin-left: 10px; |
| 上 右 下 左 | margin: 0px 10px 30px 20px; | margin-top: 0px; margin-right: 10px; margin-bottom: 30px; margin-left: 20px; |
| 上 左右 下 | margin: 5px 20px 10px | margin-top: 5px; border-right: 20px; border-bottom: 10px; border-left: 20px; |
margin-top
要素の上外余白
unknown
margin-right
要素の右外余白
unknown
margin-bottom
要素の下外余白
unknown
margin-left
要素の左外余白
unknown
padding
内余白プロパティの一括指定
unknown
paddingプロパティは、要素の内側の余白をどのくらいとるか指定します。 すべての要素に指定可能です。 paddingプロパティは「ショートハンド」（プロパティ一括指定）のため、デフォルト値はありません。
| 値 | 説明 |
|---|---|
| padding-topプロパティ | 要素の左外余白。 |
| padding-rightプロパティ | 要素の右外余白。 |
| padding-bottomプロパティ | 要素の下外余白。 |
| padding-leftプロパティ | 要素の上外余白。 |
マージン、パディング| 指定方法 | ショートハンド | 意味 |
|---|---|---|
| 一括指定 | maring: 5px | padding-top: 5px; padding-right: 5px; padding-bottom: 5px; padding-left: 5px; |
| 上下 左右 | padding: 5px 10px | padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; |
| 上 右 下 左 | padding: 0px 10px 30px 20px; | padding-top: 0px; padding-right: 10px; padding-bottom: 30px; padding-left: 20px; |
| 上 左右 下 | padding: 5px 20px 10px | padding-top: 5px; border-right: 20px; border-bottom: 10px; border-left: 20px; |
padding-top
要素の上内余白
unknown
padding-right
要素の右内余白
unknown
padding-bottom
要素の下内余白
unknown
padding-left
要素の左内余白
unknown
!DOCTYPEによるブラウザのpaddingの解釈の違い
unknown
!DOCTYPEに互換モードを指定している場合、IEではwidthで指定した値にpaddingで指定した値が含まれます。 一方、FirefoxやNetscapeではwidthで指定した値＋paddingで指定した値という風に解釈されます。
!DOCTYPEに標準モードを指定している場合は、IE、Firefox、Netscape全てwidthで指定した値＋paddingで指定した値になります。
例えばwidth=100px、padding=20pxを指定した場合、以下のようになります。
<style type="text/css">
*,body {
margin:0; padding:0;
}
div.grid {
margin:0; padding:0;
background:#fff url(/content/img/css/grid.gif) repeat top left;
width:400px; height:400px;
}
div.box1 {
margin:0; padding:20px;
background-color:orange;
width:100px; height:100px;
}
</style>
<div class="grid">
<div class="box1"></div>
</div>
| IE | Firefox、Netscape | |
|---|---|---|
| 互 換 モ ｜ ド |
 width(100px)にpadding(20px)も含まれるため、そのままwidth=100pxになります。 |
 width(100px)+padding(20px)+padding(20px)と解釈されるため、結果としてwidth=140pxになります。 |
| 標 準 モ ｜ ド |
width(100px)+padding(20px)+padding(20px)と解釈されるため、結果としてwidth=140pxになります。 |
width(100px)+padding(20px)+padding(20px)と解釈されるため、結果としてwidth=140pxになります。 |
IEとFirefox、Netscapeでのセンタリング指定の違い
unknown
FirefoxやNetscapeでは、センタリングしたい要素にmargin-left:auto;とmargin-right:auto;を指定すればセンタリングされますが、
IEではbody要素などセンタリングしたい要素の「親要素」にtext-align:center;を指定しないと、センタリングされません。
そのためセンタリングする要素の親要素に両方していしておくと多くのブラウザでセンタリングされます。
また、親要素にtext-alignを指定しているため、子要素のテキスト部分も継承されてセンタリングされてしまうので、子要素にはtext-align:left;を指定し、テキスト部分を左揃えにしておきましょう。
div.parent {
margin-left:auto;
margin-right:auto;
text-align:center;
}
div.parent div.child {
text-align:left;
}
<style type="text/css">
div.centering {
width:100%;
background-color:orange;
margin:0 auto; /* Netscape, Firefox用 */
padding:20px 0;
text-align:center; /* IE用 */
}
div.centering p {
width:80%;
text-align:left;
margin:0 auto; /* Netscape,Firefox用 */
background-color:#ffffcc;
}
</style>
<div class="centering">
<p>NetscapeやFirefoxでは、センタリングしたい要素に<code>margin-left:auto;</code>と<code>margin-right:auto;</code>を指定すればセンタリングされますが、 IEでは更にbody要素などセンタリングしたい要素の親要素に<code>text-align:center;</code>を指定する必要があります。</p>
</div>
NetscapeやFirefoxでは、センタリングしたい要素にmargin-left:auto;とmargin-right:auto;を指定すればセンタリングされますが、 IEでは更にbody要素などセンタリングしたい要素の親要素にtext-align:center;を指定する必要があります。