Why change the Box Model?

Question 1

The 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. This limitation is best illustrated with an example.

Answer 1

<h1>Hello World</h1>

h1 {
border: 1px solid black;
height: 200px;
width: 300px;
padding: 10px;
}

Question 2

In the example above, a heading element’s box has solid, black, 1 pixel thick borders. The height of the box is 200 pixels, while the width of the box is 300 pixels. A padding of 10 pixels has also been set on all four sides of the box’s content.

Unfortunately, under the current box model, the border thickness and the padding will affect the dimensions of the box.

Answer 2

The 10 pixels of padding increases the height of the box to 220 pixels and the width to 320 pixels. Next, the 1-pixel thick border increases the height to 222 pixels and the width to 322 pixels.

Under this box model, the border thickness and padding are added to the overall dimensions of the box. This makes it difficult to accurately size a box. Over time, this can also make all of a web page’s content difficult to position and manage.

Question 3

In CSS, the box-sizing property controls the type of box model the browser should use when interpreting a web page.

The default value of this property is content-box. This is the same box model that is affected by border thickness and padding.

Answer 3

width + padding + border = actual rendered with of an element’s box

Question 4

How do you reset the entire box model and specify a new one ?

This new box model avoids the dimensional issues that exist in the former box model you learned about.

Answer 4

box-sizing: border-box;

border-box

• {
  box-sizing: border-box;
  }

Question 5

border-box

The width property is the same as the actual rendered width of the element.

The content area is automatically sized based on the remaining width, after border and padding had been subtracted.

Answer 5

In this box model, the height and width of the box will remain fixed. The border thickness and padding will be included inside of the box, which means the overall dimensions of the box do not change.
e.g.
the height of the box would remain at 150 pixels and the width would remain at 200 pixels. (Even though padding is 10px and border is 1px) The border thickness and padding would remain entirely inside of the box.