Box Model & Positioning - Part 1

One principle necessary to fully understand HTML and CSS is the box model. The box model concept states that every element on a page is a rectangular box, and may include margins, padding, and borders.

That’s worth repeating. Every element on a page is a rectangular box.

Having a general understanding of the box model is crucial as websites are primarily built around it. Gaining an understanding of the box model can be frustrating and difficult, but necessary in order to build prevalent websites. Additionally, knowing how to position elements on a page to build a layout is equally important. There are a few different ways to position elements, each of which depend on the content and circumstance.

Box Sizing

By now you are fully aware that every element on a page, block or inline level, is a rectangular box. These boxes can come in different sizes and may have margins, padding, and borders to alter their size. The formation of all of these properties together is referred to as the box model. Let’s take a look at the box model, along with these CSS properties to better understand what we are working with.

The Box Model

As we know, every element is a rectangular box, of which includes a height and width, and may consist of different margins, padding, and borders. All of these values put together build what is known as the box model.

The box starts with the height and width of an element, which may be determined by the type of element, the contents of the element, or by specified height and width properties. The height and width is then followed by thepadding and border. The margin follows the border, however it is not technically included within the actual size of the box. Although it’s not included within the size of the box, the margin does help define the box model.

div {
  background: #fff;
  border: 6px solid #ccc;
  height: 100px;
  margin: 20px;
  padding: 20px;
  width: 400px;
}

To break down the total width of an element, including the box model, use the formula:
margin-right + border-right + padding-right + width + padding-left + border-left + margin-left

In comparison, the total height of an element, including the box model, can be found using the formula:
margin-top + border-top + padding-top + height + padding-bottom + border-bottom + margin-bottom

Fig. 3.02The box model broken down.

Using the formulas and box context above we can find the total height and width of our example.

Width: 492px = 20px + 6px + 20px + 400px + 20px + 6px + 20px
Height: 192px = 20px + 6px + 20px + 100px + 20px + 6px + 20px

Let’s take a close look at all of the properties that go into forming the box model.

Height & Width

Every element has an inherited height and width. Depending on the purpose of the element the default height andwidth may be adequate. If an element is key to the layout and design of a page it may require a specified height andwidth. In this case the default values for block level elements may be overridden.

CSS Height Property

The default height of an element is determined by its content. An element will expand and contract vertically as necessary to accommodate its content. To set a specific height for a block level element the height property is used.

div {
  height: 100px;
}

CSS Width Property

The default width of an element depends on its display type. Block level elements have a default width of 100%, consuming the entire horizontal space available. Inline elements expand and contract horizontally to occupy their content then stop. Since inline level elements cannot have a fixed size, the width property, as with the heightproperty, is only relevant to block level elements.

div {
  width: 400px;
}