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: