CSS: Box Sizing

CSS box-sizing

box-sizing property controls the meaning of width property.

possible values

content-box

Default. Width means the content width. Padding and border grows outside of it.

• CSS: Margin vs Padding

.x1088 {
 box-sizing: content-box;
}

border-box

Meaning of width means from border to border.

🟢 TIP: this makes layout much easier to manage.

/* make all width border based */
html {
 box-sizing: border-box;
}
*, *:before, *:after {
 box-sizing: inherit;
}

CSS Box Model

Every HTML element is treated as a rectangular box with four layers:

• content
• padding
• border
• margin

By default, the CSS property width means the content of a element. (and height too) when you add Padding and Border , the result width from border to border is bigger than the width value you used.

Examples

Following is a box with width: 100px plus padding and border.

Following is the same box with box-sizing:border-box;. The actual width from border to border is 100px.

.box-a, .box-b {
 display: inline-block;
 width: 100px;
 padding: 10px;
 border: solid 5px blue;
}

.box-a {
 box-sizing: content-box;
}

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