FAQ: CSS Box Model

What is the CSS box model?

The CSS box model is pretty much a box that wraps around every HTML element. The content, where text and images appear, is the center of the box. There is a padding layer around the content box, a border layer around the padding layer, and finally a margin layer around the border layer.

What is the difference between margin and padding?

Both margins and paddings are used to create space. Both are also transparent. The difference between the two is that the CSS margin properties are used to create space around elements, outside of any define borders. Whereas with padding, the space is generated around an element's content but inside any defined borders.

How is the total height and width of an HTML element determind?

The total width of an element should can be calculated as follows:

• Total element width = width + left padding + right padding + left border + right border + left margin + right margin

The total height of an element should be calculated as follows:

• Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

Explain this CSS property: padding: 25px 50px;

The padding property is a shorthand for padding-top, padding-right, padding-bottom, padding-left. In this case here, we have two values for the padding property. This means that the top and bottom paddings are set to 25px and the righta and left paddings are set to 50px.