Web Development: Unraveling HTML, CSS, and JavaScript/

...

/

Height and Width of the Box

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:

Press + to interact
h1 {
  margin: 20px;
  border-left: 8px;
  border-right: 16px;
  padding: 12px;
}

If the browser window’s width is 10001000 pixelspixels, the width of the <h1> tag is 1000−20−8−12−12−16−20=912pixels1000-20-8-12-12-16-20 = 912 pixels ...

Access this course and 1400+ top-rated courses and projects.