要素サイズの調整と余白の設定【CSS基礎】

ボックスモデルとは

レイアウトは、要素のサイズを調整してから配置をすることが多いです。要素のサイズを調整するためにはまず「ボックスモデル」という仕組みを知っておく必要があります。ここからはHTMLとCSSを一緒に打ちながら、理解を深める様にしましょう。

まずは以下のHTMLとCSSを打ってみましょう。

<p>新鮮野菜をお家にお届けいたします。</p>
<a href="#">お問い合わせはこちら</a>

p {
  background: #cccccc;
}

a {
  background: #cccccc;
}

aタグのhref属性のリンク先が未定の場合は#を入れておきます。このコードの結果は次の様になります。

HTMLの全てのタグは四角の領域を生成します。この仕組みを「ボックスモデル」といいます。上記で注目するのは、背景色の範囲です。pタグは背景色がブラウザの横いっぱいに表示されています。一方aタグは文字の範囲にのみ背景色が表示されています。つまりタグによって生成する四角の範囲が違うということが分かります。この２つの違いを詳しく見ていきましょう。

ブロックボックスとは

pタグの様にブラウザの幅いっぱいに四角の領域を生成するタグを「ブロックボックス」といいます。

インラインボックスとは

aタグの様にタグの中身の量しか四角の領域を生成しないタグを「インラインボックス」といいます。

<a href="#">おすすめ商品一覧はこちら</a>
<a href="#">お問い合わせはこちら</a>

「display」プロパティでボックスモデルを変更する

p {
  background: #cccccc;
}

a {
  background: #cccccc;
  display: block;
}

aタグにdisplay: block;を追加した結果は次の様になります。

「ブロックボックス」「インラインボックス」は各タグが持つdisplayプロパティの値の初期値だと考えてください。そのためdisplayプロパティの値を変えることでボックスモデルを変更することができます。両方の特性を合わせ持つ「インラインブロック」という値もあります。

プロパティ	値の例	値の説明
display	block	要素がブロックボックスを生成する。
	inline	要素がインラインボックスを生成する。
	inline-block	要素がインラインブロックボックスを生成する。（インラインボックスのまま、幅・高さ・余白の設定が可能）

margin と padding｜余白の設定

要素はボックスの外側と内側に余白を持ちます。外側の余白はmarginで、内側の余白はpaddingで設定します。

p {
  margin-top: 100px;
}

p {
  padding-top: 100px;
}

要素サイズと「padding」「border」の関係

paddingやborderの値はデフォルトでは要素のサイズに内包されません。次のコードと結果を見てみましょう。

p {
  width: 400px;
  height: 100px;
  padding: 20px;
  border: 5px solid #ff0000;
}

この様にpaddingやborderの値は要素のサイズにプラスされます。その結果、要素の実際のサイズはそれぞれの値を含めたトータルの数値となります。

box-sizing プロパティの値

paddingやborderの値を要素のサイズに内包したい場合はbox-sizingプロパティの値をborder-boxに設定します。CSSに次の１行を追記しましょう。

p {
  width: 400px;
  height: 100px;
  padding: 20px;
  border: 5px solid #ff0000;
  box-sizing: border-box;
}

結果paddingやborderの値はボックスの内側に内包される様になります。

プロパティ	値の例	値の説明
box-sizing	border-box	要素のpaddingやborderの値を、widthheightに含める。
	content-box	要素のpaddingやborderの値を、widthheightに含めない。初期値。