HTML・CSS Writing 2022

box-sizing --Border width / padding is stored inside the block width / height --Introduction to CSS [CSS3 compatible]

You can use box-sizing to fit the border width / padding inside the block width / height.

box-sizing: border-box;

Let's actually see the difference. If "box-sizing: border-box;" is specified, the border and padding are drawn inside the width of 300px, while if not specified, the border and padding are drawn outside the width of 300px. It's much more intuitive and easier to adjust the size if you specify it.

<div style = "width: 300px; box-sizing: border-box; padding: 30px; border: 5px solid red">
  "Box-sizing: border-box;" is specified
</div>
<br>
<div style = "width: 300px; padding: 30px; border: 5px solid red">
  "Box-sizing: border-box;" not specified
</div>

It is easier to adjust the size by specifying "box-sizing: border-box;", so Stylesheet (CSS) default settings Let's specify it with Categorical selector.

* {{
  box-sizing: border-box;
}