w3resource logo


CSS box model - CSS tutorials

CSS box model

rating Average rating 10 out of 10. Total 2 users rated.

<<PreviousNext>>

Description

In an HTML page, an element (it may contain other elements within it)generates a rectangular box. This is described as CSS Bo Model.

There are several CSS properties which works with respect to the CSS Box Model.

Dimensions

CSS Box Model has three dimensions: padding, border and margin, in that order with respect to the actual content.

The following picture clarifies the concept of padding, border and margin.

CSS-box-model

padding is the area next to the actual content.

border is the area next to the padding. Alternatively you can say that it is the area between padding and margin.

margin is the area next to the border.

The properties padding, border and margin can be applied with respect to top, left, bottom and right of the associated element. The following picture clarifies that :

CSS-box-model-sides

The following picture shows the content, padding, border and margin edges :

CSS-box-model-edeges


Content edge


padding edge


border edge

-------- margin edge

Facts you must understand and remember

  • CSS box model applies to block elements only, not to inline elements.
  • When an element is displayed in the web browser, it's width / height is : (width|height) margin + border + padding. Remember that width is affected by left and right padding, border and margin, height is affected by top and bottom padding, border and margin.
  • effective-width-and-height
  • When two block elements lie next to each other, and if their margin are greater that zero, the larger of the two margins is applied only. See the picture bellow :
  • colapsing-margins


<<PreviousNext>>