Why the bottom text doesn't stick to heading (css)

user_17306740 0
Viewed 48

Problem: .parc_ned doesn't stick to .parc_name

.parc {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}

.parc_avatar {
  width: 50px;
  border-radius: 100%;
  margin: 6px;
}

.parc_ned {
  font-size: 12px;
}

.parc_name {
  vertical-align: top;
  font-size: 24px;
}
<div class="parc">
  <img class="parc_avatar" alt="USER_AVATAR" src="https://dummyimage.com/100x100/000/fff">
  <span class="parc_name">Lorem ipsum</span>
  <span class="parc_ned">Lorem ipsum</span>
</div>

Here's result: https://media.discordapp.net/attachments/776497290390143076/904991557013356594/Screenshot_20211102_091141.jpg

responsive-design css html
1 Answers

Youre aligning .parc_name to the top by setting vertical-align:top but youre missing that same styling for .parc_ned so it does not align itself to the top.

By adding vertical-align:top to the .parc_ned selector it moves to the top. I also added matching line-height and display:inline-block to both selectors to make the text inside the elements centered to each other.

.parc {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}

.parc_avatar {
  width: 50px;
  border-radius: 100%;
  margin: 6px;
}

.parc_ned {
  vertical-align: top;
  font-size: 12px;
  line-height: 26px;
  display: inline-block;
}

.parc_name {
  vertical-align: top;
  font-size: 24px;
  line-height: 26px;
  display: inline-block;
}
<div class="parc">
  <img class="parc_avatar" alt="USER_AVATAR" src="https://dummyimage.com/100x100/000/fff">
  <span class="parc_name">Lorem ipsum</span>
  <span class="parc_ned">Lorem ipsum</span>
</div>

In case you didnt want it to be at the top but "stick" to the left of the name you would have to add another div:

.parc {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}

.parc_avatar {
  width: 50px;
  border-radius: 100%;
  margin: 6px;
}

.parc_content {
  display: inline-block;
  vertical-align: top;
}

.parc_ned {
  font-size: 12px;
  display: block;
}

.parc_name {
  vertical-align: top;
  font-size: 24px;
  display: block;
}
<div class="parc">
  <img class="parc_avatar" alt="USER_AVATAR" src="https://dummyimage.com/100x100/000/fff">
  <div class="parc_content">
    <span class="parc_name">Lorem ipsum</span>
    <span class="parc_ned">Lorem ipsum</span>
  </div>
</div>

user_42180460
Related