Learn Typography by Building a Nutrition Label - Step 11

HTML-CSS
1

Tell us what’s happening:

Hi! This is not a question on an issue but rather seeking for an explanation.
In the tutorial at some point is says:

If you inspect your .label element with your browser's developer tools, you may notice 
that it's actually 288 pixels wide instead of 270. This is because, by default, the browser 
includes the border and padding when determining an element's size.

But if I inspect the element using inspector I actually see:
Total: 288
Width: 270
padding: 7
border: 2
auto: ? This is for the margin I guess

It looks like that 288 is given by width+padding+border+margin as well.
Is it a right assumption that also the margin is included for this label (div) element by the browser?

Thank you!

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Nutrition Label</title>
  <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
  <link href="./styles.css" rel="stylesheet">
</head>

<body>
  <div class="label">
    <h1>Nutrition Facts</h1>
    <p>8 servings per container</p>
    <p>Serving size 2/3 cup (55g)</p>
  </div>
</body>
</html>

/* file: styles.css */

/* User Editable Region */


/* User Editable Region */


html {
  font-size: 16px;
}

body {
  font-family: 'Open Sans', sans-serif;
}

.label {
  border: 2px solid black;
  width: 270px;
  margin: 20px auto;
  padding: 0 7px;
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/112.0

Challenge: Learn Typography by Building a Nutrition Label - Step 11

Link to the challenge:

2

Welcome to our community!

The border-box tells the browser to account for any border and padding in the values you specify for an element’s width and height. If you set an element’s width to 100 pixels, that 100 pixels will include any border or padding you added, and the content box will shrink to absorb that extra width. This typically makes it much easier to size elements.

1 Like