余白の指定 - 趣味サイトのためのCSS3講座

余白の指定方法についての説明です。

「margin: 数値」で外側の余白を、「padding: 数値」で内側の余白を指定できます。指定方法は以下の5通りあります。
数値を4つ指定指定した順に「上」「右」「下」「左」の値になる
数値を3つ指定指定した順に「上」「左右」「下」の値になる
数値を2つ指定指定した順に「上下」「左右」の値になる
数値を1つ指定上下左右すべてが指定した値になる
各方向だけを個別に指定上はmargin-top、右はmargin-right、下はmargin-bottom、左はmargin-left でそれぞれ指定

《例》

.box {
border: 3px solid skyblue;
border-radius: 10px;
margin: 1em 0;
padding: 0.5em 1em 0.7em 1em;
}

《表示結果》

枠線の外側がマージンです。マージンは、1em 0 で指定しています。

枠線の内側がパディングです。パディングは、0.5em 1em 0.7em 1em で指定しています。

《他のパターン》

マージンを 1.5em 2em に、パディングを 2.4em 1em 1.5em 2em に変更しています。枠線はピンク色にしています。

マージンを 2em 0.7em に、パディングを 1em 2em 2.2em 1.2em に変更しています。枠線はピンク色にしています。

▲ページの先頭へ
「margin: 0 auto」で要素の中央寄せができます。左右のmarginを「auto(自動)」にすることで、左右の余白が均等になるように自動(auto)計算されるため、中央寄せになるという仕組みです。ただしこれはブロックレベル要素にのみ適用できるもので、aタグやimgタグなどのインライン要素には適用できません。
そこで下記のように「display: block」を同時に指定することで、インライン要素をブロックレベル要素に変換でき、中央寄せが機能します。

《例》

<img class="center" src="......">

.center {
margin: 0 auto;
display: block;
}
▲ページの先頭へ

>>CSS3講座メニューへ戻る