The Box Model
In this course, you will learn how to use the Box Model to position HTML elements on your web page.
StartKey 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
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
- 1Browsers 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…
- 2The 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 …
- 3An 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 …
- 5Ever 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 …
- 7Another 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…
- 9What 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…
- 11As 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…
- 12Because 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 …
- 14All 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…
- 15Elements 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…
What you'll create
Portfolio projects that showcase your new skills
How you'll master it
Stress-test your knowledge with quizzes that help commit syntax to memory