Learn Typography by Building a Nutrition Label - Step 44

[gordonworks]

Can someone explain why putting the ‘span’ tag around the Total Fat 8g 10% alters their position on the line? There is no selector for span and shouldn’t do anything from my understanding.

Nutrition Label

Nutrition Facts

8 servings per container

Serving size 2/3 cup (55g)

Amount per serving

Calories

230

% Daily Value *

Total Fat 8g 10%

Saturated Fat 1g 5%

• {
  box-sizing: border-box;
  }

html {
font-size: 16px;
}

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

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

header h1 {
text-align: center;
margin: -4px 0;
letter-spacing: 0.15px
}

p {
margin: 0;
display: flex;
justify-content: space-between;
}

.divider {
border-bottom: 1px solid #888989;
margin: 2px 0;
}

.bold {
font-weight: 800;
}

.large {
height: 10px;
}

.large, .medium {
background-color: black;
border: 0;
}

.medium {
height: 5px;
}

.small-text {
font-size: 0.85rem;
}

.calories-info {
display: flex;
justify-content: space-between;
align-items: flex-end;
}

.calories-info h2 {
margin: 0;
}

.left-container p {
margin: -5px -2px;
font-size: 2em;
font-weight: 700;
}

.calories-info span {
margin: -7px -2px;
font-size: 2.4em;
font-weight: 700;
}

.right {
justify-content: flex-end;
}

[bbsmooth]

Because the p element is using flexbox to align the items inside of itself. Without that span then there are three items to put space between. Adding that span makes it only two items to put space between, so “Total Fat” and “8g” will be treated as one entity by flexbox and thus they will stay next to each other.