0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

CSSのpaddingをつけても横幅が広がらないようにする方法

Posted at

CSSのpaddingをつけても横幅が広がらないようにする方法

CSSで要素にpaddingを追加すると、通常はその分だけ要素の横幅が広がってしまいます。
box-sizing: border-box; を指定することで、横幅を固定したまま padding を適用することが可能です。

1. デフォルトの動作

CSSのデフォルトでは、要素の widthcontent-box で計算されます。
これは、 paddingborder の分が追加されるため、指定した width よりも実際の横幅が大きくなります。

.box {
  width: 200px;
  padding: 20px;
  border: 1px solid #000;
}

この場合、実際の要素の横幅は 200px + 20px + 20px = 240px となり、意図しないレイアウト崩れの原因になることがあります。

2. box-sizing: border-box; で解決

この問題を防ぐには、 box-sizing: border-box; を適用します。

.box {
  width: 200px;
  padding: 20px;
  box-sizing: border-box;
  border: 1px solid #000;
}

この場合、padding を含めても width: 200px が維持されるため、レイアウトが崩れません。

3. ページ全体に適用する場合

すべての要素に border-box を適用したい場合は、以下のように * セレクタを使用するのが便利です。

* {
  box-sizing: border-box;
}

これにより、すべての要素が border-box で計算され、予期しない横幅の変化を防ぐことができます。

まとめ

  • デフォルトpaddingborder を追加すると、要素が指定した width よりも広がる。
  • border-box を使うと width の中に paddingborder が含まれるため、横幅が変わらない。
  • ページ全体に適用するなら * { box-sizing: border-box; } を使うと便利。

これを活用することで、余計なレイアウト崩れを防ぎ、スムーズなデザイン調整が可能になります!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?