The CSS box model explained

The box model is something every designer working with CSS needs a full understanding of, in order to know how elements interact with each other and also how various properties affect an element. Essentially, each element in CSS is surrounded by a box whose dimensions are automated depending on the content. By using width and height properties
in CSS, these dimensions can be defined in a specific manner. You can set padding to surround the content and add a border and margins to the box. A background image and background color can also be defined. Any background image or color is visible behind the content and padding, but not the margin. The effective space an element takes up is the sum of the box dimensions (which effectively define the available dimensions for the box’s contents), padding, border, and margins. Therefore, a 500-pixelwide box with 20 pixels of padding at each side and a 5-pixel border will actually take up 550 pixels of horizontal space (5 + 20 + 500 + 20 + 5).

Note that in some cases, margins between two elements “collapse,” leading to only the larger margin value being used.

Related posts:

1. Using Property Values Property values come in the following forms: constant text, constant...
2. List margins and padding Browsers don’t seem to be able to agree on how...
3. Using Shorthand Properties in CSS Your body rule should now look like this: body {...

Related posts brought to you by Yet Another Related Posts Plugin.