レイアウトの指定

レイアウトの指定方法についての説明です。

「margin: 数値」で、外側の余白を指定できます。指定方法は以下の5通りあります。

数値を4つ指定:指定した順に「上」「右」「下」「左」の値になる

数値を3つ指定:指定した順に「上」「左右」「下」の値になる

数値を2つ指定:指定した順に「上下」「左右」の値になる

数値を1つ指定:上右下左すべてが指定した値になる

各方向だけを個別に指定:上はmargin-top、右はmargin-right、下はmargin-bottom、左はmargin-left でそれぞれ指定

「padding: 数値」で、内側の余白を指定できます。指定方法はmarginと同じです。
「.枠線のCSS名 テキストのタグ名」でCSSを作成し、「text-align」で指定します。

《例》

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

.box p {
text-align: left
}

《表示結果》

枠線の外側がマージンです。マージンは、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 に変更しています。

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