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 auto keyword
Height and Width Maximums/Minimums
Dealing with overflow
The visibility Property
CSS Margin Collapse
The property box-sizing of CSS box model
CSS box-sizing: border-box
CSS auto keyword
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.
Height and Width Maximums/Minimums
Height and Width Maximums/Minimums
div {
margin: auto;
}The CSS min-width and min-height properties can be used to set a minimum width and minimum height of an element’s box. CSS max-width and max-height properties can be used to set maximum widths and heights for element boxes.
Dealing with overflow
Dealing with overflow
div {
margin: auto;
}If content is too large for its container, the CSS overflow property will determine how the browser handles the problem.
By default, it will be set to visible and the content will take up extra space. It can also be set to hidden, or to scroll, which will make the overflowing content accessible via scroll bars within the original container.
The visibility Property
The visibility Property
div {
margin: auto;
}The CSS visibility property is used to render hidden objects invisible to the user, without removing them from the page. This ensures that the page structure and organization remain unchanged.
CSS Margin Collapse
CSS Margin Collapse
div {
margin: auto;
}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 property box-sizing of CSS box model
The property box-sizing of CSS box model
div {
margin: auto;
}The CSS box model is a box that wraps around an HTML element and controls the design and layout. The property box-sizing controls which aspect of the box is determined by the height and width properties.
The default value of this property is content-box, which renders the actual size of the element including the content box; but not the paddings and borders. The value border-box, on the other hand, renders the actual size of an element including the content box, paddings, and borders.
CSS box-sizing: border-box
CSS box-sizing: border-box
div {
margin: auto;
}The value border-box of the box-sizing property for an element corresponds directly to the element’s total rendered size, including padding and border with the height and width properties.
The default value of the border-box property is content-box. The value border-box is recommended when it is necessary to resize the padding and border but not just the content. For instance, the value border-box calculates an element’s height as follows:
height = content height + padding + border.
- 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 …
- 4A 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 …
- 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 …
- 6The 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…
- 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…
- 8So 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…
- 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…
- 10The 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…
- 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 …
- 13All 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…
- 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…
- 16In 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…
- 1The last lesson focused on the most important aspects of the box model: box dimensions, borders, padding, and margin. The box model, however, has an awkward limitation regarding box dimensions. T…
- 2Many properties in CSS have a default value and don’t have to be explicitly set in the stylesheet. For example, the default font-weight of text is normal, but this property-value pair is not typi…
- 3Fortunately, we can reset the entire box model and specify a new one: border-box. * { box-sizing: border-box; } The code in the example above resets the box model to border-box for all HTML e…
- 4Now that you know about the new box model, let’s actually implement it in the browser. * { box-sizing: border-box; } It’s that simple! In the example above, the universal selector (*) targets…
- 5In this lesson, you learned about an important limitation of the default box model: box dimensions are affected by border thickness and padding. Let’s review what you learned: 1. In the default b…
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
The Box Model
Start