Key Concepts

Review core concepts you need to learn to master this subject

CSS auto keyword

div { margin: auto; }

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.

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 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 _…
  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 use…
  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: * width—The thickness of the border. A border’s th…
  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. A declaration that uses multiple proper…
  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 direct…
  9. 9
    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…
  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.headline { width: 400px; margin: 0 auto; } In …
  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 ta…
  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: * hidden — hides an element. * visible — displays an …
  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 HTM…

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