CSS Box Model – Introduction

This post is part of a CSS Layout course that you can take with us to learn how to create CSS Layouts using HTML and CSS float layout technique. This post will make sense to you the most if you watch the accompanying videos described in the course description at the end of this post. You might still be able to find useful information in this post even if you don’t take the course but that’s primarily not the goal of this post.

In order to understand the CSS box model, you need to understand what a box is.

If you write the following line of code in your text editor, save it as for example example.html and then open the document in a web browser,

<p>This is a paragraph.</p>

In the browser view port, what you’ll see is actually the same sentence without the “p” tags. If you inspect the website with some tool, for example Firebug, you’ll see a whole box around the sentence in the view port. The box will have the following parts:

  • content – where the sentence comes
  • padding – some padding around the content
  • border – a border line around the padding (by default the border is not there if you don’t specify one.)
  • margin – some margin around the border and outside the box

This is a simple box that you can put anything inside it. It kind of resembles actual boxes that we have in the world. Of course not exactly, you have some space in the box which is the content area. around the content area you can have some padding. We usually don’t do this in the real world in case of real boxes though. Then comes the walls of the box which you could think of as the “border”. The “margin” is actually outside the box. It could be thought of as the horizontal space between two boxes on the floor.

There are three types of boxes that you’re going to be dealing with the most,

  • Block-level boxes
  • Inline boxes
  • Inline-block boxes

We’ll familiarize ourselves with each type in the upcoming lessons.

As mentioned before, this post is part of the documentation section of a CSS Layout course. In this course, you can learn how to create flexible layouts using the “float” CSS property. You can take this course with us at the following address:

Author: Gahara Raschedian

Math and Science Teacher

Leave a Reply

Your email address will not be published.