Why can't I change the margin of my paragraphs? - html

Question

For some context, I am brand new to programming and only about two hours in to an HTML/CSS tutorial, so I don't know many elements, properties etc. beyond what you see in my code here. Forgive me if my terminology is inaccurate, but hopefully this makes sense.
I am doing an exercise at the end of a particular lesson trying to match a design, and trying to eliminate the margin (or blank space) between my first paragraph line and my second paragraph line. As you can see, I've tried changing the margin, line-height, and padding to zero (anything I could think of) but the gap remains.
In the solution code for this exercise, I see the teacher chose to change the bottom margin targeting all paragraphs instead of the specific paragraph classes to make this happen. I would like to understand why that would work, but targeting the specific paragraph classes is not affecting the margin. I assume I will understand this later, but I hesitate to move on until I do.
My code
<style>
p {
font-family: arial;
}
.price {
font-size: 36px;
}
.currency {
margin-left: 12px;
font-size: 16px;
color: gray;
margin-bottom: 0px;
line-height: 0px;
padding-bottom: 0;
}
.change {
padding-top: 0;
margin-top: 0;
color: green;
font-size: 16px;
line-height: 0;
}
.after-hours {
color: gray;
}
.after-hours-change {
color: red;
}
</style>
<p class="price">1,049.61<span class="currency">USD</span></p>
<p class="change">+18.05 (1.75%) today</p>
<p class="after-hours">After hours 1,048.00
<span class="after-hours-change">-1.61 (0.15%)</span></p>
Picture of my result
The teacher's solution code
<style>
p {
font-family: Arial;
margin-top: 0;
margin-bottom: 0;
}
.price {
font-size: 32px;
margin-bottom: 5px;
}
.currency {
font-size: 16px;
color: rgb(100, 100, 100);
}
.change {
color: rgb(24, 128, 56);
margin-bottom: 8px;
}
.after-hours {
color: rgb(100, 100, 100);
}
.after-hours-change {
color: rgb(235, 39, 39);
}
</style>
<p class="price">
1,049.61 <span class="currency">USD</span>
</p>
<p class="change">
+18.05 (1.75%) today
</p>
<p class="after-hours">
After hours 1,048.00
<span class="after-hours-change">-1.61 (0.15%)</span>
</p>
Picture of his result

Answer 1

Because the margin-bottom: 5px; is not set by you to the .price.
Paragraph is a block element, so it adds up a margin below, but the font-size also counts in -- as I can see.
p {
font-family: arial;
}
.price {
font-size: 32px;
margin-bottom: 0.5em;
}
.currency {
margin-left: 12px;
font-size: 16px;
color: gray;
margin-bottom: 0px;
line-height: 0px;
padding-bottom: 0;
}
.change {
padding-top: 0;
margin-top: 0;
color: green;
font-size: 16px;
line-height: 0;
}
.after-hours {
color: gray;
}
.after-hours-change {
color: red;
}
<p class="price">1,049.61<span class="currency">USD</span></p>
<p class="change">+18.05 (1.75%) today</p>
<p class="after-hours">After hours 1,048.00<span class="after-hours-change">-1.61 (0.15%)</span></p>