The CSS box model has a direct effect on how the background-image and background-color properties are displayed relative to padding and borders.
I will be discussing this later in the lecture.
As we discussed earlier, content area, padding, borders and margin constitute the element box. The CSS box model describes the relative spatial relationship between all the parts of the element box. The image below is a diagram of the CSS box model.
The content area, padding, borders and margin do not overlap. This aspect is important in determining the total size of the element box. We will discuss this in depth later in the lecture.
As you can see from the diagram above, the content area is at the core of the box model. The content area has width and height properties. The content area contains text or images within the opening and closing tags of the element.
Padding surrounds the content area. Note that padding is always transparent so that the background of the element box will show through. You can only specify the length of the padding—padding has no other values.
By default, elements have 0 padding.
The border surrounds the padding. Borders can have a line thickness, color and a style.
By default, elements do not have a visible border.
Finally, margin completes the box model, surrounding the border. Like padding, margin is always transparent, and only has a length value.
For most elements, the default margin is zero. Some elements, such as P, UL, OL, BLOCKQUOTE and headings have a default top and bottom margin set by the UA's default style sheet.
For now, let's proceed with a discussion of borders ...