余白の指定方法についての説明です。
| 数値を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 に変更しています。枠線はピンク色にしています。
<img class="center" src="......">
.center {
margin: 0 auto;
display: block;
}