How are margins, borders, padding, and content related?
Author: Deron Eriksson
Description: This CSS tutorial examines the box model, which describes how margins, borders, padding, and content are related.
Tutorial created using: Windows XP
Section 8 of the CSSW 2 specification describes the "Box model", which is a rectangular representation of a displayed element. This box features a content area surrounded by padding surrounded by a border surrounded by a margin. The background of the content and padding areas can be set using the "background" property. The color of the border area can be set using border properties. The margin is transparent.
The padding, border, and margin areas can be subdivided into their top, right, bottom, and left sections. Thus, we can refer to specific sections: padding-top, padding-right, padding-bottom, padding-left, border-top, border-right, border-bottom, border-left, margin-top, margin-right, margin-bottom, margin-left. As a result, we can manipulate each of these sections via the property values of each section.
The outer edge of each area is considered its edge, so the content area is surrounded by the content edge, the padding section is surrounded by the padding edge, the border section is surrounded by the border edge, and the margin section is surrounded by the margin edge.
(Continued on page 2)