In a document, each element is represented as a rectangular box. The box model is the way each of these boxes are described in CSS. This model describes the content of the space taken by an element. Each box has four edges: the margin edge, border edge, padding edge, and content edge.
You can see a graphic representation of the box model here: http://codepen.io/asainz/pen/ogwXJR
It's the actual content of the element.
The padding area wraps the content area. If the content are has a background, it will extend to the padding area. Any content will not extend to the padding area.
The border area extends the padding area to the border edge.
The margin area extends the border area with an empty area used to separate the element from its neighbors.
CSS3 brought a new box-sizing property that allows you to alter how the box model is calculated. The box-sizing has the following possible values. Check this codepen http://codepen.io/asainz/pen/LELEvd to see how boxes are affected by the different values.
This is the default style as specified by the CSS standard. The width and height properties are measured including only the content, but not the padding, border or margin.
The width and height properties include the padding and border, but not the margin.
- Box model representation
Demo: http://codepen.io/asainz/pen/ogwXJR
Gist: https://gist.github.com/asainz/5e44e9f3c8cd2316f738
Andres Sainz de Aja - andres.sainz@globant.com