What is the Box Model?
The box model is a tool we use to understand how our content will be displayed on a web page.
- Each XHTML element appearing on our page takes up a “box” or “container” of space.
- Each box size is affected not only by content but also by padding, borders, and margins.
- By knowing how to calculate the dimensions of each box, we can accurately predict how elements will lay out on the screen.
- As we build a new page, we can arrange these boxes on the screen, creating a balanced layout with white space around the content.
Box Model Components
This model describes the content of the space taken by an element. Each element has four components: the margin, border, padding, and content.
content area is the area containing the real content of the element. It often has a background, a color or an image and is located inside the content edge; its dimensions are the content width, or content-box width, and the content height, or content-box height.
padding area is the space between the content of the element and its border. Negative values are not allowed. The padding clears an area around the content (inside the border) of an element. This property sets the padding space on all sides of an element.
The border area extends the padding area to the area containing the borders. It is the area inside the border edge, and its dimensions are the border-box width and the border-box height. This area depends on the size of the border that is defined by the
border-width property or the shorthand
margin property defines the outermost portion of the box model, creating space around an element, outside of any defined borders.
The <div> Element
<div> tag defines a division or a section in an HTML document. The
<div> tag is used to group block-elements to format them with CSS.
<div> (“division”) element groups other elements on the screen.
- By setting the width and height attributes via CSS, we can reserve a precise amount of space on our page for specific content.
- The actual content is nested and contained within the opening
and closing tags.
- When we apply CSS styling directly to the <div> element, all the elements contained within that <div> will inherit that style.
- By using multiple <div> elements as building blocks, we can design an entire web page layout.
Example <div> Element
Let’s create a box on the screen and add a border around it:
Notice that there is almost no space separating the text from the box border. Elements such as paragraphs, headers, and lists automatically insert padding and margins, but plain text does not do so.
Adding Padding and Margin
Let’s create some space between elements by adding both padding and margin:
The 10 pixel padding adds buffer space, on all four sides, between the content and border. The 10 pixel margin adds buffer space, on all four sides, between the border and surrounding elements.
Calculating Total Dimensions
When we are planning our page, we have to calculate exactly how much screen space a <div> or any other element will use. The formula is:
- Total element width = defined width + left padding + right padding + left border + right border + left margin + right margin.
- Total element height = defined height + top padding + bottom padding + top border + bottom border + top margin + bottom margin.
In our previous example:
- Total <div> width = 200px + 10px + 10px + 1px + 1px + 10px + 10px = 242px.
- Total <div> height = 200px + 10px + 10px + 1px + 1px + 10px + 10px = 242px.
Padding, borders, and margins do not have to be the same on all four sides, as they are in this example.
Setting Individual Margins
We can set the specific margin sizes by using these four properties:
In practice, few web designers use these properties, preferring a shorthand method that condenses the declaration to a single line:
Setting Individual Borders
To make things easier, we can use the shorthand method as before:
If the three border properties will be identical on all four sides, we can use a single-line border shorthand, as we did in an earlier lesson: