Blog

border-box CSS Value
Posted on September 3, 2020 in CSS by Matt Jennings

The boxing-size: border-box; CSS rule takes into account the padding and border when calculating the width or height of an HTML element, like a div. The margin is NOT considered when using this CSS rule.

For example, consider the following CSS code:

*, *:before, *:after {
  box-sizing: border-box;
}

.content-box {
   width: 500px;
   padding: 20px;
   border: 5px solid red;
   background: $4dfff3;
}

Because of the parent selector (*, *::before, *::after) with a rule of boxing-size: border-box; the .content-box selector will be example 500px width, INCLUDING the 20px left and 20px right border and 5px left and 5px right border.

Leave a Reply