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. 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. 2
    The Box Model
    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 …
    Start
  3. 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 …
    Start
  4. 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. 1. width — The thickness of the border. A border’s …
    Start
  5. 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. 6
    Padding I
    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. 7
    Padding II
    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. p.content-header { border: 3px solid…
    Start
  8. 8
    Margins I
    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…
    Start
  9. 9
    Margins II
    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…
    Start
  10. 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 { margin: 0 auto; } In the example above, marg…
    Start
  11. 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. 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. 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 t…
    Start
  14. 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. 15
    Visibility
    Elements can be hidden from view with the visibility property. The visibility property can be set to one of the following values: 1. hidden — hides an element. 2. visible — displays a…
    Start
  16. 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 HT…
    Start

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo