CSS Lesson 10: Box Model

2
34

In the next few lessons you’ll learn the core aspects of the CSS box model, which are: border, padding, outline, and margin. These properties will assist you in getting the design you want. So please pay attention, and spend some time practicing. All of these properties are easy to understand, so enjoy learning them!

Introduction to CSS Box Model

The Box Model is one of our favorite parts of CSS. A Box Model is more of an understanding rather than a practice. First of all, what the heck is a Box Model? In simple words, it is a box of HTML Elements. Basically, CSS considers every HTML Element as a BOX. A Box Model consists of four sections: Margin, Border, Padding and Content. Every section can be handled with CSS properties. To visualize what a box model looks like, see the following image to help you out:

Box_model

As you can see, a box model is divided into the margin, border, padding and content. You’ll learn about these in detail in the next lesson. Here’s a brief introduction of each section:

  • Margin: The margin gives a space between two elements of same page. It’s the transparent area outside of the border and it’s optional to use.
  • Border: The border covers the padding and content part. Unlike a margin, it gives a visual separation between content and other element of the same page.
  • Padding: Just like a margin, padding is also a transparent area and is optional. BUT padding is the area between a border and the content.
  • Content: Content can be both text and images. It’s the central part of a Box Model. CSS width and height properties control the content section.

Height and Width of Box Model

Elements of a Box Model are height (top and bottom) and width (left and right), which can be described with width and height property.

So, do you know there is a formula to calculate height and width of Element of Box Model? Cool, isn’t it? Let’s tell you what it is and how you can calculate it!

There’s a simple rule of thumb to calculate height and width of a Box Model. Let’s divide the elements into height and width.

Element Height = height (content) + top padding + bottom padding + top border + bottom border + top margin + bottom margin
Element Width = width (content) + left padding + right padding + left border + right border + left margin + right margin

Suppose you have a content of a width 400px with padding 10 px, margin 10 px and border 5 px. Here is the calculation of the total width using the above formula.

400px (width) + 20px (left and right padding) + 20px (left and right margin) + 10px (left and right border) = 450px (Total Width of Element)

Source Code Output

The total width of this Element is 450px. Where width of content is 400px, padding is 10px, margin is 10px and border is 5px solid black.

Things to keep in mind:

  • In a box model, width and height means the width and height of the content area.
  • Always remember- if you use 10px padding/margin/border, a CSS Box Model will consider it 20px. WHY? Because CSS considers it for one side only and adds the same value for other side. Just like the above example, we set 10px padding but we added 20px.
  • It is not mandatory to define every value for every section of the box model.

Summary

  • CSS use of a box is called the Box Model.
  • Box Models have a margin, border, padding and content section.
  • Margin: the transparent space outside border.
  • Border: covers padding and content sections.
  • Padding: the transparent area above content.
  • Content: the central part of the CSS Box Model

Next Lesson

In the next few lessons, we will teach you about each section of the Box Model. Let’s first start with Margin.

2 COMMENTS

  1. […] Normally, an outline doesn’t affect your design. As mentioned above, if you add the outline property, it would not affect the height and width of your Box Model. […]

  2. […] Actually, the alignment properties apply to the content of the box e.g. the text-align property aligns the text only, while the float property floats the whole Box Model. […]

Leave a Reply