Overview of This Lesson

The box model allows you to add borders, margins, and padding around an element's content. Margin space is the space around the outside of the border of the element, and it provides space between elements, and also between elements and the borders of their container. Padding space is the space around the inside of the border of the element: it is the space between the element's content and the element's inner border.

the CSS Box Model
The box model: the content is surrounded by padding. Padding is enclosed by a border. Margins represent the spacing around the outside of the border.

We're going to cover each element of the box model, starting with borders. Then we'll learn how to add padding and margins.

After we learn the basics, we'll cover some related topics such as element width/height, and fun stuff like box shadows.

Pre-Requisites

Before doing this lesson, make sure you're already familiar with the syntax of CSS, and how to use CSS in your projects. You probably also want to have the CSS Values tutorial/reference open in another tab.

Styling Borders

Borders can be added to elements to make the appearance more interesting, or to help visually divide areas of the page. You can configure borders with a specific width (usually in pixels), colour, and style, although there are other border properties you might wish to explore on your own.

Style of Border Line

The border-style property sets the style of border (the type of line the border has). It can be assigned one of several pre-defined values:

It's important to note that no other border properties will take effect unless the border-style property has been set.

The none value can be used when you want to "turn off" an existing border.

The hidden value hides a border. The difference between none and hidden is very subtle - hidden has a higher priortiy when there is a conflict, so if you're having issues turning off a border, try hidden if none isn't working.

The border-style property can take multiple values if you want to have a different style for each side of the border. For example:

You can see some examples and play around with border styles using the CSS: Border Style CodePen.

CodePen: Border Style

See the Pen CSS: Border Style by Wendi Jollymore (@ProfWendi) on CodePen.

Border Thickness (Width)

The border-width property defines the width or thickness of the border line. The border-width property accepts a dimension value; usually this is a relative unit, but older stylesheets would use pixels (px). I also often use pixels in the examples when I want to exaggerate the thickness of a border so you can see whatever is being demonstrated. Note that border-width only accepts a dimension value, it will not accept percentage (%) units.

Specifying one value sets the width for all four sides. For example, border-width: .2em; sets all four sides of the border to 20% of the font size.

There are also several pre-defined values that define the border width: thin, medium, and thick. For example, border-width: thick; makes a thicker border.

As with border-style, you can use one, two, three, or four values to set the different sides of the border. For example, border-width: .2em .1em; creates a border that is 20% of the font size on top/bottom and 10% on the sides.

You can see some examples and play around with border widths using the CSS: Border Width CodePen

CodePen: Border Width

See the Pen CSS: Border Width by Wendi Jollymore (@ProfWendi) on CodePen.

Border Colour

The border-color property sets the colour of the border. You can use any valid colour value.

Additionally, you can use border-colour: transparent; if you want to use a transparent border (sounds weird, but it can come in handy if you want the space for a border but don't want an actual line showing).

As with border-style and border-width, you can specify one, two, three, or four values to set different colours for each side of the border.

You can see some examples and play around with border colours using the CSS: Border Colour CodePen

CodePen: Border Colour

See the Pen CSS: Border Colour by Wendi Jollymore (@ProfWendi) on CodePen.

Shorthand Properties

There are also some properties you can use if you want to set the border style, width, or colour of just one side of the border individually. For example, you might have some default settings for borders but want to change just one side.

You can see an example of why we might use these properies in the CSS: Border Properties CodePen. Experiment with the values, and also note the extra question below the ".special-div".

CodePen: Border Shortcut Properties

See the Pen CSS: Border Properties by Wendi Jollymore (@ProfWendi) on CodePen.

The Shorthand Border Property

You can easily define borders using the single border shorthand property. The property takes values for the border's width, the border's style, and the border's colour. For example:

div {
  border: .2em double darkgreen;
}

The rule above creates a border that is 20% of the font size, uses the double border style, and is dark green in colour. These characteristics are applied to all four sides.

You can also specify only the width and style or only the style and colour:

.ex-1 {
  border: .2em double;
}
.ex-2 {
  border: double darkgreen;
}

The ex-1 rule defines a double border that's 20% of the font size. By default, the border will be black. The ex-2 rule defines a dark green double border. By default, it will be 1 pixel.

A similar shorthand can be used to define border-left, border-right, border-top, and border-bottom:

div {
  border-left: .2em solid darkgreen;
  border-bottom: .4em double darkgreen;
}

The example above styles DIV elements to have a left border that is .2em, solid, dark green and a bottom border that is .4em, double-lined, dark green. There will be no top and right borders.

You can use the border property to define different values for each side, just as you would with the other properties. Be careful, as this often makes your border property hard to read!

CodePen: Play with the Shorthand Border Property

See the Pen CSS: Border Shorthand Property by Wendi Jollymore (@ProfWendi) on CodePen.

Rounded Borders

You can create rounded corners on your borders using the border-radius property. It's not supported by all browsers so be aware that it shouldn't be an important part of your page's appearance.

The border-radius takes one, two, three, or four values. Specifying one value defines the radius of all four corners. Specifying two values defines the radius of the top-left/bottom-right corners and the top-right/bottom-left corners. Specifying three values defines the radius of the top-left, top-right/bottom-left, and bottom-right corners, respectively. Specifying all four values defines the radius for the top-left corner, top-right corner, bottom-right corner, and bottom-left corner, in that order (start at top-left and go clockwise).

the four versions of border-radius
The four versions of the border-radius property

You can also use the individual border-top-left radius, border-top-right-radius, border-bottom-right-radius, and border-bottom-left-radius properties.

I like using border-radius to do interesting things. There's an example in my CSS: Border Radius CodePen

CodePen: Border Radius

See the Pen CSS: Border Radius by Wendi Jollymore (@ProfWendi) on CodePen.

Padding

Padding is space inside an element, between the element's content and the element's border (whether the border has been defined or not). In the box below, I've set the padding to 10 pixels. Right-click/Inspect the box and examine the computed styles.

A Box with 10px Padding

You should see an image of the box model when you inspect and view the computed style of the box:

The box's box model in my browser

You can see that the content area is 180px by 180px (I used absolute values so that the DIV height and width so that it would be square, otherwise it would resize to fit the content). Around the content, you can see that there is 10px of padding. Around the padding is the border, which has a width of 0, since I didn't add a border (we'll do that next).

If your content area is shown as 200px by 200px, don't panic, it just means that your browser has the box-sizing property set a certain way, which we'll talk about later.

When you specify padding, you have several options:

Setting each padding property separately: padding-top, padding-bottom, padding-left, and padding-right. Each property sets the padding on one side, e.g. padding-right sets the padding only on the right side. You wouldn't normally use all four at once: You usually use one or two of these properties to change the padding on one or two sides.

Each property takes a single unit of measurement. Usually in a relative unit, but you can use any valid dimension that's a size measurement (e.g px, em/rem, %, etc).

Example: Try the CodePen CSS: Padding Example 1. Try changing the different padding values. Try changing some to %, try also using px.

CodePen: Padding Example 1

See the Pen CSS: Padding Example 1 by Wendi Jollymore (@ProfWendi) on CodePen.

Shorthand Padding Property

The shorthand padding property allows you to set all four padding values at once. For example, padding: 5px 7px 9px 12px; The first value defines padding-top, the second value defines padding-right, the third value defines padding-bottom, and the last value defines padding-left (start at the top and go around clockwise).

You can also specify three values, to set the top, right/left, and bottom. For example, padding: 5px 10px 12px; defines top padding of 5px, bottom padding of 12px, and both the left and right padding at 10px.

Specifying 2 values defines the padding for top/bottom and the padding for left right. For example, padding: .25em .5em; defines top and bottom padding of .25 times the font size and left/right padding of .5 times the font size.

Specifying one value defines the padding for all four sides. For example, padding: .5em; defines padding of half the font size on all four sides - top/bottom/left/right.

We can combine the individual properties and shorthand properties to make our code smaller and more efficient. For example, you might have some padding set for all DIVs in a document and define certain DIVs to have different padding on the left. You can see an example of this at this CodePen: CSS Padding Example 2.

CodePen: Padding Example 2

See the Pen CSS: Padding Example 2 by Wendi Jollymore (@ProfWendi) on CodePen.

Margins

Where padding defines the space inside an element, between its content and the border, margins define the space around the outside of an element. In other words, margins are the spaces outside of the element's border and provides some space between elements on the page.

Margin properties work exactly like padding properties. You have the individual properties and the shorthand property, and they work in the exact same way:

You can use the auto value to horizontally center an element. For example:

div {
  margin: .3em auto .5em;
  width: 75%;
}

The div rule above will add a top margin that is 30% of the font size, a bottom margin that is 50% of the font size, and will automatically distribute the left and right margin such that the div is centred on the page. The width property was added to make the div smaller than the viewport width: if the width was set to its default of 100%, then using "auto" for the left/right margin wouldn't work. Note also that this centers the div container on the page, it does not center its text. For that, you would need to use text-align.

I've made some simple examples using margin properties in the CSS: Margin Properties CodePen. Feel free to play with the margin values.

CodePen: Margin Properties

See the Pen CSS: Margin Properties by Wendi Jollymore (@ProfWendi) on CodePen.

Element Height & Width

You might have noticed during the lesson that sometimes an element's height and width depends on the box model: the size of an element might include it's padding, margins, and border width. It's important to be able to calculate the width and height of an element properly, and also how you can have a bit of control over an element's box size.

Setting Element Width and Height

You often will want to specify the width and height of an element. This can be done using relative units or absolute units Use relative units for scalable and responsive design; use absolute units when you need a specific size (e.g. for an image).

.logo {
  border: 1px solid green;
  height: 250px;
  margin: 5px;
  width: 300px;
}

div {
  margin: .3em .5em;
  width: 95%;
}

You can also use the value auto for height and width. This value indicates that you want the browser to calculate the height and width.

Note that if the height and width of your element doesn't fit the element's content, you could end up with some undesirable results. See CSS: Height and Width for a demonstration of how the height and width works with pixel measurements. You can have some control over how the content is dealt with using the overflow property.

CodePen: Height/Width (and Overflow)

See the Pen CSS: Height and Width by Wendi Jollymore (@ProfWendi) on CodePen.

Note also that when you right-click/Inspect the box and view the computed style, the size of the margin, padding, and border are added to the 200px width and height. That means the total width of the box is 10px (left margin) + 1px (left border) + 5px (left padding) + 200px (content) + 10px (right padding) + 1px (right border) + 5px (right margin) = 232px. You can do a similar calculation for the total height.

Calculating Height and Width of Elements

By default, an element's height and width does include the height and width of its content, as well as the thickness of any margins, padding, and borders the element has.

For example, let's say you have a div with the following CSS rule:

div {
  border: 2px solid green;
  margin: 3px 5px;
  padding: 7px;
}

Let's say the content of the DIV element is some text that takes up 500 pixels of width and 250 pixels of height. What would be the total size of the element on the page?

First, let's calculate the width: You would have to take the width of the content and add the width of the border, plus any margin and padding. So for our example, would it be correct to say that the width of the element is 500 + 2 (the border) + 5 (the margin) + 7 (the padding)? No!

an example of box model sizing
The width includes the width of borders, margin, and padding on both sides. The height includes the height of borders, margin, and padding on both top and bottom.

The border goes all around the element, so you have border space on both the left and right sides. You also have padding on both the left and right sides, and margin space on both the left and right sides. Therefore, you have to make sure you add 2 x the border width, the left padding, right padding, left margin, and right margin. Therefore, we would calculate the total width as:

total width = 500 + 2 + 2 + 7 + 7 + 5 + 5
            = 528 pixels

Similarly, we can calculate the element's height as content height + 2 * border thickness + top padding + bottom padding + top margin + bottom margin:

total height = 250 + 2 + 2 + 7 + 7 + 3 + 3
            = 274 pixels

Exercise

Given the following styles:

div {
  border: 1px solid green;
  margin: 2px 5px 7px;
  padding: 4px 6px;
}

img {
  border: 0px solid;
  margin: 1px 2px 3px 1px;
  padding: 10px;
}

What would be the total width and height of a DIV element that contains an IMG element, where the image is 300 x 300 pixels?

The box-sizing Property

The box-sizing property defines how the total width and total height of an element's box area is calculated. It can receive one of the following values:

We often use the border-box property to make sure a series of elements are the same width when they might have borders/margins/padding of different sizes. Examine the CodePen below: Notice that the divs are all different widths because they have different border widths and different amounts of padding.

See the Pen CSS: Box Sizing Property by Wendi Jollymore (@ProfWendi) on CodePen.

Uncomment the declaration in the rule that styles all the divs to set the box-sizing property to border-box. Notice that all the divs are now the same size.

Box Shadows

Box shadow is used to create "cards", which is currently a trend in web design.

To define a box shadow, you need to use the box-shadow property. You need to specify at minimum, 2 things:

To understand the horizontal and vertical offset, imagine the shadow already exists directly behind the element so that you can't see it. If you offset it by a certain number of pixels, it's like sliding the shadow to the sides or up/down so that the edges of it are visible.

Try this CodePen example CSS: Box Shadow 1. Try changing the values of the shadow's horizontal and vertical position. Try using negative values, too.

CodePen: Box Shadow - Offset

See the Pen CSS: Box Shadow 1 by Wendi Jollymore (@ProfWendi) on CodePen.

Right now the shadow is pretty sharp. You can add a third value to specify the amount of fuzziness (or blur) to your shadow. This is also usually set in pixels; it defines how much of the shadow you want to blur, starting from the outer edges of the shadow and going towards the middle of the element.

Try this CodePen example CSS: Box Shadow 2 to see how blur works. Play around with the values!

CodePen: Box Shadow - Blur

See the Pen CSS: Box Shadow 2 by Wendi Jollymore (@ProfWendi) on CodePen.

A fourth value can be used to specify the spread of the shadow. The shadow spread defines how much the shadow should expand (imagine smudging it with your finger to make it larger).

Try this CodePen example CSS: Box Shadow 3 to see how shadow spread works. Play around with the values!

CodePen: Box Shadow - Spread

See the Pen CSS: Box Shadow 3 by Wendi Jollymore (@ProfWendi) on CodePen.

Are you tired of this plain black border? You can add a 5th value to change the colour of your shadow. I've added one to CSS: Box Shadow 4 so you can try it out.

CodePen: Box Shadow - Colour

See the Pen CSS: Box Shadow 4 by Wendi Jollymore (@ProfWendi) on CodePen.