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:

Inline-block Elements and Boxes

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.

To know the difference between “elements” and “boxes”, please go to “Block-level Elements and Boxes“. If you have landed on this page from within the course page, then you must already have read that part.

Inline-block boxes can be generated with the following CSS property:

display: inline-block;

Here’s are some important characteristics of inline-block boxes:

Inline-block boxes are just like inline boxes, in that they don’t take up the whole view port width. They take up only as much width as there’s content inside them.

In order to control the different box model properties of inline-block elements and boxes, you basically use the classical box model (the usual width, height, margin, border and padding) that you normally would use in case of normal block-level boxes.

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:

Inline Elements and Boxes

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.

To know about the difference between “elements” and “boxes”, please go to Block-level Elements and Boxes. If you’ve landed on this page from within the course page, then you must have already read that part.

Here’s the important characteristics of inline elements that you should understand:

  • As opposed to block-level elements like p, inline elements generate the kind of boxes that get only as wide as the content inside them.
  • As opposed to block-level boxes, inline boxes don’t have an integrated line breaking mechanism. That means, they do not start on a new line, nor do them break their own line.
  • Inline elements can contain text and other inline elements but no block-level elements.

Here’s a list of a few famous inline elements:

  • a
  • b
  • big
  • i
  • small
  • tt
  • abbr
  • acronym
  • cite
  • code
  • dfn
  • em
  • kbd
  • strong
  • samp
  • time
  • var
  • a
  • bdo
  • br
  • img
  • map
  • object
  • q
  • script
  • span
  • sub
  • sup
  • button
  • input
  • label
  • select
  • textarea

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:

Block-level Elements and Boxes

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.

As the title of this post suggests, there are,

  • Block-level elements, and,
  • Block-level boxes

The term “element” refers to to source code that you write. The term “box”, on the other hand, refers to how that element is represented on the browser view port.

For example, when you write an HTML p tag in your HTML document and write some text between the opening and closing p tags, the whole combination of the opening p tag, the closing p tag and the text inside the tags is rendered or represented in a specific way in the browser view port. Among other characteristics, the text starts on a new line; the paragraph takes up the whole view port width, no matter how wide the browser windows is at the moment,  and no matter how much content the p tag has. Moreover, the next box starts on the next line in the view port.

The whole content of the p tags (the text) and the way the paragraph is represented in the viewport can be resembled to a box on the view port and hence the term “box”. You could therefore say that a box is the representation of an HTML tag and its contents in the view port. You’ll see this and we’ll explain it more in the video related to this lecture (see the course description below).

Now there are some characteristics of block level elements and boxes that you should be familiar with, especially if you want to create layouts, using HTML and CSS.

Block-level boxes, created from block-level elements in your HTML source code, always begin on new lines and break their own line. That means a p tag and all of its contents start on a new line and the next element in the code starts from the next line even if there’s still free space on the line not filled by the p tag contents.

Block-level elements can contain other block-level and inline elements. We’ll learn more inline elements later. For example, you can have a paragraph (opening and closing p with some text as its content) and inside the paragraph, you can have another same combination like the following:

<p>Lorem Ipsum is simply dummy<p>a block-level element inside another block-level element</p>  text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer</p>

block-level and inline  distinctions and terminology have been replaced with other terminology in HTML5 like “flow content”, “phrasing content”, etc. We’ll deal with them in another course. Those older specifications that we’re dealing with right now are covered in HTML specifications up to 4.01. As a web developer you need to know the older specifications as well since you’re still going to have to work with them at least in next 5 years to come.

Here’s a list of some block-level elements:

  • address
  • figure (HTML5)
  • noscript
  • article (HTML5)
  • footer (HTML5)
  • ol
  • aside (HTML5)
  • form
  • output (HTML5)
  • blockquote
  • h1, h2, h3, h4, h5, h6
  • p
  • br
  • header (HTML5)
  • pre
  • canvas (HTML5)
  • hgroup (HTML5)
  • section (HTML5)
  • dd
  • hr
  • table
  • div
  • li
  • tfoot
  • dl
  • main
  • ul
  • fieldset
  • nav
  • video (HTML5)
  • figcaption (HTML5)

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: