Key Concepts

Review core concepts you need to learn to master this subject

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
    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. 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. 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 height and width properties can be …
  4. 4
    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 …
  5. 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. 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. 7
    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…
  8. 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. 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. 10
    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…
  11. 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. 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. 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. 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. 15
    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…
  16. 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…

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