The box model is very important in understanding CSS and HTML. Essentially all block-level HTML elements are always in the shape of a rectangle.
The CSS Box Model
- Content is in the middle.
- Padding is the area between the content and border. The default is zero.
- Border is the area between the padding and margin. This is commonly changed to create an outline. The default is zero.
- Margin defines the empty space between the element and any adjacent elements. This is normally transparent.
Box-Sizing Property
The CSS Box Model has an odd sizing issue. By default, setting a size for an element only impacts the content area.
500px
560px
The content area is 500px wide. Padding is 25px wide on all sides. The border is 5px wide on all sides. The margin is 0px on all sides. Thus the total width is 560px.
While this is generally fine, there are times when this causes issues. The box-sizing property can be used to correct this. The box-sizing property instructs the browser to include the padding and border size when computing overall size of the element. Margin is never included.
There are two primary values for this property: content-box and border-box. Content-box is the default, while border-box includes the padding and border as part of the size.500px
560px
The content area is 500px wide. Padding is 25px wide on all sides. The border is 5px wide on all sides. The margin is 0px on all sides. However, box-sizing is set to border-box; the total width is 500px.
The content area is 500px wide. Padding is 25px wide on all sides. The border is 5px wide on all sides. The margin is 25px on all sides. However, box-sizing is set to border-box; the total width is 550px. In short: 500 for content, padding, and border + 50 for margin!
550px
