CSS Box Model

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.

css-box-model

Box Model Components
This model describes the content of the space taken by an element. Each element has four components: the margin, borderpadding, and content. 
box-model
Content
The 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
The 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.

Border
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 border.

Margin
The margin property defines the outermost portion of the box model, creating space around an element, outside of any defined borders.

The <div> Element
The <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.

The <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:div-element
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:
padding-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.

Padding and Margin Illustrated
padding-margin-ill
When we define the width and height of a <div> element, these dimensions apply only to the actual content, not to the padding, border, or margin.

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:
margin1
In practice, few web designers use these properties, preferring a shorthand method that condenses the declaration to a single line:margins

Setting Individual Padding
We can set specific padding sizes by using these four properties:
padding1
The same shorthand method is employed:
padding

Setting Individual Bordersborder
To make things easier, we can use the shorthand method as before:border2
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:
border3

Example of Customized Settings
Here we have set custom padding, borders, and margins:customized-settingclockwise