Box Sizing
The box-sizing
property allows us to include the padding and boarder in the calculation of an element’s height and width. This is a slightly more advanced so no need to use it if you are just getting started to code.
Syntax
box-sizing: <value>;
The box-sizing
property has two values.
border-box
: Any assigned padding or border is included in the calculation of an elements height or width. If an elements width is set to100px
and padding is set to30px
, the padding will be included in the elements set width resulting in the total width still being100px
.content-box
: Default CSS behavior, the assigned height or width of an element plus any padding will be the total height or weight. If an elements width is set to100px
and padding is set to50px
, the total width for the element will be150px
.
Example 1
Setting a div
elements box-sizing
to border-box
.
.div {box-sizing: border-box;}
Example 2
Setting a div
elements box-sizing
to content-box
.
.div {box-sizing: content-box;}
All contributors
- asiqurr43 total contributions
- christian.dinh2481 total contributions
- Anonymous contributorAnonymous contributor3077 total contributions
- asiqurr
- christian.dinh
- Anonymous contributor
Looking to contribute?
- Learn more about how to get involved.
- Edit this page on GitHub to fix an error or make an improvement.
- Submit feedback to let us know how we can improve Docs.