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 – border-box versus content-box

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.

The CSS property box-sizing can have four different values:

  • content-box
  • border-box
  • initial
  • inherit

initial and inherit apply to almost all (or I think all) CSS properties and are not important here, so we don’t talk about them.

content-box

When you set the value of the box-sizing property of an element to content-box, the width property defined for that element determines the width of the content area only, not including padding, border or margin.

For example, let say you had the following code,

div#id1 {
box-sizing: content-box; 
width: 150px; 
padding: 20px; 
border: 1px solid black; 
margin: 20px; 
}

This situation for div#1 would mean that the total width of div#id1 is the sum of,

  • 150px content area width
  • padding-left width of 20px
  • padding-right width of 20px
  • border-left width of 1px
  • border-right width of 1px
  • margin-left width of 20px
  • margin-right width of 20px

That would in total come to,

150 + 20 + 20 + 1 + 1 + 20 + 20 = 232px

So you can easily calculate how much viewport width you need for div#id1. You can calculate it.

Note: The Firefox Firebug add-on does not take margin left or right into consideration when it’s reporting elements’ widths. But when you are doing layouts, you definitely need to take that into consideration as well since margin-left and margin-right of boxes take space in the viewport.

border-box

If, on the other hand, you set the box-sizing value of a box to border-box, the value of a width property given to that element would refer to the width of the content area, border-left and border-right and padding-left  and padding-right of that element altogether. Let’s look at the following example,

For example, if you had the following,

div#id1 {
box-sizing: border-box; 
width: 20%; 
padding: 20px; 
border: 1px solid black; 
}

This situation for div#id1 would mean that the total width of div#id1 is just 20% of the parent element. padding-left (20px), padding-right (20px), border-left (1px) and border-right (1px) are going to be subtracted automatically by the browser from the 20%, no matter what value the 20% in pixel happens to be based on the width of the parent element. For example, if in this case, the width of the parent element of div#id1 is 1080px, then the width of div#id1 is going to be 1080 * 20% = 216px. The content area of div#id1 is going to have a width of 216px – 20px (padding-left) – 20px (padding-right) – 1px (border-left) – 1px (border-right) = 174px.

Please note that I have written no margin in the code snippet above. Also, I have written the values for width and padding in different units, width in % and padding in px. It comes in handy if you’re able to use mixed units when you’re dealing with CSS layouts for example with float or also using other techniques.

Box-Sizing CSS Property Practical Application

box-sizing: border-box; is useful in situations where you want/have to enter the values for width, padding and border of your HTML elements in different mixed units. For example, you enter the width in % and padding and border in px. If you are developing a layout and have identified the width of some section of your layout in % and the width of padding related to that section in px, then there’s no way for you to calculate the total width of the section anymore if the box-sizing property of that layout section is set to content-box. In that case the total width would be “20% + padding-left-width + padding-right-width”. 20% is not a fixed value and changes based on the width of the parent element the layout section lives in.

In such cases, you set the box-sizing property of the layout section to border-box. Having the same example in mind, the total width of the the whole layout section would become 20% of the parent element the layout section lives in. The other element next to the layout section in the layout could have a width of 80% and you’re done.

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: