Height and Width of the Box

In this lesson, we will look at setting up the height and width of the box. Let's begin!

We'll cover the following

Normally, the browser calculates the width of a box from the width of its container. From the width of the box, the content width is calculated by subtracting the size of these six elements: the left margin, the left border, the left padding, the right padding, the right border, and finally the right margin. For all direct children of the <body> tag, the width of the container is the browser window’s width.

Let’s make an example calculation. Assume, we have an <h1> tag nested directly into <body> and the style sheet defines this rule:

Get hands-on with 1400+ tech skills courses.