CoverT 35: Box Sizing Border Box

CSS

Mar 17, 2020

code

The box-sizing property defines how the width and height of an element are calculated.

content-box (default): The width and height properties (and min/max properties) includes only the content. Border and padding are NOT included
border-box: The width and height properties (and min/max properties) includes content, padding and border

Example

<div class="my-box">
  <span>content box</span>
</div>
<div class="my-box border-box">
  <span>border-box</span>
</div>

.my-box {
  border: 10px solid;
  padding: 10px;
  width: 200px;
  height: 200px;
  background-color: yellow;
  display: flex;
  justify-content: center;
  align-items: center;
}

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

Result

content box

border-box