CSS Box Model Properties – Block-level Elements

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.

If you want to control any aspect of the box model, you need to use the relevant CSS properties. For example, you want to add some border around the content of the box. You write the following line of code in your CSS:

p {
border: 1px solid black;
}

Or you want to add some padding to the top of the box, you write this line of code in your CSS:

p {
padding-top: 10px;
}

You basically have the following keywords in order to control the different aspects of the box model of any box in CSS:

  • width
  • height
  • padding
  • border
  • margin

“width” specifies the width of the content area in case of box-sizing: content-box. In the case of box-sizing: border-box; it controls the width of content area + padding-right + padding-left + border-right + border-left.

“height” specifies the height of the content area in case of box-sizing: content-box. In the case of box-sizing: border-box; it controls the height of content area + padding-top + padding-bottom + border-top + border-bottom.

“padding” specifies the width of the padding around the content area. You can have padding-top, padding-right, padding-bottom and padding-left.

In the case of “border” things get a little complicated since you can have,

  • padding-width
  • padding-style
  • padding-color

Each of these can, in turn, be defined for each of the sides. So you can, for instance, have

  • padding-right-width
  • padding-left-style
  • padding-bottom-color
  • etc.

“margin” defines the width of the margin for the four sides of the box. So you can have

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Please note that if you simply write “margin” it’s going to set the margin for the four sides of the box simultaneously. This applies to “padding” and “border” as well. For example, if you write,

p { margin: 10px; }

it would have the same meaning and effect as,

p {
margin-top: 10px;
margin-right; 10px;
margin-bottom: 10px;
margin-left: 10px;
}

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:

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: