Learn CSS: The Box Model

In this course, you will learn how to use the Box Model to position HTML elements on your web page.

Start

Key Concepts

Review core concepts you need to learn to master this subject

The property box-sizing of CSS box model

CSS box-sizing: border-box

CSS auto keyword

CSS height and width maximums and minimums

Dealing with overflow

The visibility Property

CSS Margin Collapse

The property `box-sizing` of CSS box model

.container {
  box-sizing: border-box;
}

The CSS box model is a box that wraps around an HTML element and controls the design and layout. The property box-sizing controls which aspect of the box is determined by the height and width properties. The default value of this property is content-box, which renders the actual size of the element including the content box; but not the paddings and borders. The value border-box, on the other hand, renders the actual size of an element including the content box, paddings, and borders.

CSS `box-sizing: border-box`

.container {
  box-sizing: border-box;
}

The value border-box of the box-sizing property for an element corresponds directly to the element's total rendered size, including padding and border with the height and width properties.

The default value of the border-box property is content-box. The value border-box is recommended when it is necessary to resize the padding and border but not just the content. For instance, the value border-box calculates an element's height as follows: height = content height + padding + border.

CSS `auto` keyword

.container {
  box-sizing: border-box;
}

The value auto can be used with the property margin to horizontally center an element within its container. The margin property will take the width of the element and will split the rest of the space equally between the left and right margins.

CSS height and width maximums and minimums

.container {
  box-sizing: border-box;
}

The CSS min-width and min-height properties can be used to set a minimum width and minimum height of an element's box. CSS max-width and max-height properties can be used to set maximum widths and heights for element boxes.

Dealing with `overflow`

.container {
  box-sizing: border-box;
}

If content is too large for its container, the CSS overflow property will determine how the browser handles the problem.

By default, it will be set to visible and the content will take up extra space. It can also be set to hidden, or to scroll, which will make the overflowing content accessible via scroll bars within the original container.

The `visibility` Property

.container {
  box-sizing: border-box;
}

The CSS visibility property is used to render hidden objects invisible to the user, without removing them from the page. This ensures that the page structure and organization remain unchanged.

CSS Margin Collapse

.container {
  box-sizing: border-box;
}

CSS margin collapse occurs when the top and bottom margins of blocks are combined into a single margin equal to the largest individual block margin.

Margin collapse only occurs with vertical margins, not for horizontal margins.

The Box Model

Lesson 1 of 2

1
Browsers load HTML elements with default position values. This often leads to an unexpected and unwanted user experience, while limiting the views you can create. In this lesson you will learn abou...
2
The box model comprises the set of properties which define parts of an element that take up space on a web page. The model includes the content area's size (width and height) and the element's ...
3
An element's content has two dimensions: a height and a width. By default, the dimensions of an HTML box are set to hold the raw contents of the box. The CSS [...] and [...] properties can ...
4
A border is a line that surrounds an element, like a frame around a painting. Borders can be set with a specific [...] , [...] , and [...] . 1. [...] — The thickness of the border. A b...
5
Ever since we revealed the borders of boxes, you may have noticed that the borders highlight the true shape of an element's box: square. Thanks to CSS, a border doesn't have to be square. You can ...
6
The space between the contents of a box and the borders of a box is known as padding. Padding is like the space between a picture and the frame surrounding it. In CSS, you can modify this space w...
7
Another implementation of the [...] property lets you specify exactly how much padding there should be on each side of the content in a single declaration. [...] In the example above, the fo...
8
So far you've learned about the following components of the box model: content, borders, and padding. The fourth and final component of the box model is margin. Margin refers to the space dir...
9
What if you don't want equal margins on all four sides of the box? A similar implementation of the margin property is used to specify exactly how much margin there should be on each side of the b...
10
The [...] property also lets you center content. However, you must follow a few syntax requirements. Take a look at the following example: [...] In the example above, [...] will center ...
11
As you have seen, padding is space added inside an element's border, while margin is space added outside an element's border. One additional difference is that top and bottom margins, also called v...
12
Because a web page can be viewed through displays of differing screen size, the content on the web page can suffer from those changes in size. To avoid this problem, CSS offers two properties that ...
13
All of the components of the box model comprise an element’s size. For example, an image that has the following dimensions is 364 pixels wide and 244 pixels tall. - 300 pixels wide - 200 pixels t...
14
All major web browsers have a default stylesheet they use in the absence of an external stylesheet. These default stylesheets are known as user agent stylesheets. In this case, the term " user ag...
15
Elements can be hidden from view with the [...] property. The [...] property can be set to one of the following values: 1. [...] — hides an element. 2. [...] — displays an ele...
16
In this lesson, we covered the four properties of the box model: height and width, padding, borders, and margins. Understanding the box model is an important step towards learning more advanced HT...

1
The last lesson focused on the most important aspects of the box model: box dimensions, borders, padding, and margin. The box model, however, has an awkward limitation regarding box dimensions. T...
2
Many properties in CSS have a default value and don't have to be explicitly set in the stylesheet. For example, the default [...] of text is [...] , but this property-value pair is not typical...
3
Fortunately, we can reset the entire box model and specify a new one: [...] . [...] The code in the example above resets the box model to [...] for all HTML elements. This new box model avo...
4
Now that you know about the new box model, let's actually implement it in the browser. [...] It's that simple! In the example above, the universal selector ( [...] ) targets all elements on th...
5
In this lesson, you learned about an important limitation of the default box model: box dimensions are affected by border thickness and padding. Let's review what you learned: 1. In the default b...