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

CSS Margin Collapse

CSS auto keyword

Dealing with overflow

Height and Width Maximums/Minimums

The visibility Property

The property box-sizing of CSS box model

CSS box-sizing: border-box

CSS Margin Collapse

/* The vertical margins will collapse to 30 pixels
instead of adding to 50 pixels. */
.block-one {
  margin: 20px;
}

.block-two {
  margin: 30px;
}

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
Introduction to the Box Model
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…
Start
2
The Box Model
The box model comprises the set of properties that 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 _…
Start
3
Height and Width
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 height and width properties can be use…
Start
4
Borders
A border is a line that surrounds an element, like a frame around a painting. Borders can be set with a specific width, style, and color: * width—The thickness of the border. A border’s th…
Start
5
Border Radius
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 …
Start
6
Padding
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…
Start
7
Padding Shorthand
Another implementation of the padding property lets you specify exactly how much padding there should be on each side of the content in a single declaration. A declaration that uses multiple proper…
Start
8
Margin
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 direct…
Start
9
Margin Shorthand
What if you don’t want equal margins on all four sides of the box and don’t have time to separate properties for each side? You’re in luck! Margin can be written as a shorthand property as well. Th…
Start
10
Auto
The margin property also lets you center content. However, you must follow a few syntax requirements. Take a look at the following example: div.headline { width: 400px; margin: 0 auto; } In …
Start
11
Margin Collapse
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…
Start
12
Minimum and Maximum Height and Width
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 …
Start
13
Overflow
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 ta…
Start
14
Resetting Defaults
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…
Start
15
Visibility
Elements can be hidden from view with the visibility property. The visibility property can be set to one of the following values: * hidden — hides an element. * visible — displays an …
Start
16
Review
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 HTM…
Start