March 1, 2018
2 min read
The CSS basic box model describes the layout of elemnts on the DOM via content, padding, borders, and margins. The basic model is shown below.
+---------------------+
| Margin |
| +-----------------+ |
| | Border | |
| | +-------------+ | |
| | | Padding | | |
| | | +---------+ | | |
| | | | Content | | | |
| | | +---------+ | | |
| | +-------------+ | |
| +-----------------+ |
+---------------------+
In the basic model, the width of an element refers only to its content box. However, with the css property box-sizing you can change this. By setting box-sizing: border-box you can directly set the width of the border box and the content box will change its size to accommodate. The default CSS box model can be used with box-sizing: content-box.
Some developers seem to recommend setting all elements in your CSS to use the border box formatting. Putting the below styles into your stylesheets would affect all elements on your page.
html { box-sizing: border-box;}*,*:before,*:after { box-sizing: inherit;}