div枠でpaddingを指定するとサイズが大きくなり、はみ出てしまう - CSS

Div枠にPaddingスタイルを設定すると、Div枠の大きさが意図されたものより大きくなってしまう現象について紹介します。

現象

Div枠にPaddingスタイルを設定すると、Div枠の大きさが意図されたものより大きくなってしまうことがあります。

原因

これは、Div枠のサイズが、幅はwidth + margin + padding + border、高さはheight + margin +paddin + border で定義されているためです。
marginやborderに関しては枠の外部の余白のため、レイアウトに大きな影響を与えませんが、paddingは枠内の余白のため、枠の幅や高さは、widthやheightで設定した枠のサイズにpaddingを加算したサイズとなり、width,　height プロパティで指定したサイズよりより大きくなります。そのため意図しない現象がおきることがあります。

回避方法

1:枠全体の幅や高さを、width, height プロパティにpadding プロパティの値を加算したものとして設計する

枠の全体の幅はwidth, height プロパティの値にpadding プロパティの値が加算されたサイズになるため、そのサイズを想定して画面を設計します。

2：paddingを設定したDivタグを内側に配置する

Divタグを入れ子にしてpaddingを設定したDivタグを内側に入れることでも回避できます。

記述例

  <div style="width:240px; height:16px; margin-left:12px;margin-top:8px;">
    <div style="padding-left:12px;padding-top:8px;">
      Hello CSS World!
    </div>
  </div>

参考

paddingプロパティの記述の詳細に関してはこちらの記事を参照してください。