Box Model
XHTML documents contain elements (tags) that are organized into a hierarchy. Web browsers use CSS to lay out the contents of the elements and to give the contents visual formatting.
A Web browser draws a rectangle for each element represented on a Web page, and lays out rectangles on the page as shown in the illustration below. The rendering of elements as rectangles in this way is called the "Box Model", since each element is rendered as a box. The CSS determines the characteristics of each box (its placement on the page, colors, border, etc., plus the font and style used for its contents).
Boxes or rectangles drawn to represent elements are made up of 4 parts. As seen in the following illustration, they are: the contents, the border, the space between the contents and border (called "padding"), and the space between the border and the edge of the rectangle, called the "margin".
There are two types of elements - block and inline:
- Block elements
- Block elements take up 100% of the width of their parent element. This pushes any sibling elements underneath. For example,
h1 is a block element. Any element following the h1 element is displayed underneath. - Inline elements
- Inline elements take up only the width of their contents. This means that two or more inline elements can be displayed next to each other on the same line. For example, the
a tag is an inline element. It can appear in the middle of a line with text preceding it and following it.
CSS control the appearance of each rectangle and its contents. CSS have properties for setting foreground color and background color, border width, border style, font face, font size and many more options.
Web browsers have built-in CSS rules for certain predefined XHTML elements. For example, the built-in CSS for top-level headings (h1 element) renders the font size twice the size of regular text. The built-in CSS for hyperlinks (a element) renders hyperlinks blue with an underline. Built-in CSS can be overwritten by custom CSS rules.