Search⌘ K
AI Features
Home
Courses
Web Development: Unraveling HTML, CSS, and JavaScript

Height and Width of the Box

Explore how CSS determines the height and width of boxes by calculating content size plus margins, borders, and padding. Understand how to explicitly set box dimensions, manage overflow content, and use min/max size properties for flexible layouts.

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:

NAME_
CSS
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 ...