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

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 >1,049.61<span >USD</span></p>

<p > 18.05 (1.75%) today</p>

<p >After hours 1,048.00 
  
<span >-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 >
  1,049.61 <span >USD</span>
</p>

<p >
   18.05 (1.75%) today
</p>

<p >
  After hours 1,048.00
  <span >-1.61 (0.15%)</span>
</p>

Picture of his result

CodePudding user response：

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 >1,049.61<span >USD</span></p>

<p > 18.05 (1.75%) today</p>

<p >After hours 1,048.00<span >-1.61 (0.15%)</span></p>