CSS uses a box model, in which a marked up document is viewed as a hierarchy of rectangular boxes, with each box representing an element in the document. The size of the box depends on the size of the element’s rendered content, and it is by controlling both the properties and the contents of the boxes of a document that the appearance of a Web page is controlled. The content of a box is the content between the two tags of an element. The properties of a box are shown in Figure 8.1. Of the properties, the ones that can be controlled with CSS are border, padding, and margin.
Border (which is invisible by default) separates the edge of one box from the next box; padding is the space between the border of a box and the content of the box; and margin is the space outside the border.
Although there are many types of boxes, the main ones are block-level type (e.g., a paragraph containing lines of text and a section containing paragraphs) and inline-level type (e.g., words in a line of text; however, an inline-level box may contain a block-level box). The block-level boxes represent block-level elements, and the inline-level boxes represent inline- level elements. As mentioned in Chapter 2, block-level elements always start on the next line, while inline elements start on the same line. Apart from the box that represents the topmost element (i.e., the <html> element), every other box is inside another box, which could be inside another, and so on. An element that is inside another element is a child element of that element, and the element containing it is referred to as the containing or parent element. This means that an element that is a parent of one element can be a child element of another, and so on. Figure 8.2 shows a rendered Web document with a hierarchy of block boxes (in blue) and inline ones (in red). The outmost is the <html> element, the next is the <body> element, and the rest are the <h1> and two <div> elements; in the <div> elements are inline elements, such as <span> and <b>, and the <p> element. The leftover text at the bottom that is not enclosed in its own box is known as an anonymous block box. It cannot be styled by its own and is influenced only by the styling properties of its parent, which in this case is the bottom <div> element.
FIGURE 8.1 An illustration of CSS box model for an element
FIGURE 8.2 An illustration of the boxes that enclose HTML elements, using a rendered document
Source: Sklar David (2016), HTML: A Gentle Introduction to the Web’s Most Popular Language, O’Reilly Media; 1st edition.