Southend Linux User Group

CSSbox Model

Cascading Style Sheets

The box model

An understanding of the box model is key to the formatting of a page and individual elements on a page. The three properties work in a very similar fashion. In most cases the space left for margins, borders etc. is the same all round the content. So for example you can specify an all round margin of (say) 10pixels by simply setting the property {margin:10px;}. The diagram below shows the relationship between the 3 properties. If necessary each value can be specified separately.

The box diagram shows the relation between the margin, border and padding.

Box

Note: margins, borders and padding can be defined using a single line either as
margin:top/bottom left/right e.g. style=”margin:0px 20px;” or as
margin:top right bottom left e.g. style=”margin:0px 20px 0px 20px;”

The values are specified in a clockwise direction starting from the top, i.e. top right bottom left. Values can also be specified individually as the following table shows.

Group Name value inherited
Margin, Border and Padding, margin { | inherit } no
margin-top
margin-bottom
margin-left
margin-right
border { | inherit } no
border-top
border-bottom
border-left
border-right
padding { | inherit } no
padding-top
padding-bottom
padding-left
padding-right

Author: Alan Campion - Page reference: 928
Last modified: Alan Campion - 2015-03-01