为什么底部文本不紧贴标题 (css)

Question

问题： .parc_ned不粘.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>

结果如下： https://media.discordapp.net/attachments/776497290390143076/904991557013356594/Screenshot_20211102_091141.jpg

Answer 1

您通过设置 vertical-align:top 将 .parc_name 对齐到顶部，但您缺少 .parc_ned 的相同样式，因此它不会自行对齐到顶部。

通过将 vertical-align:top 添加到 .parc_ned 选择器，它会移动到顶部。我还向两个选择器添加了匹配 line-height 和 display:inline-block 以使元素内的文本彼此居中。

.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>

如果您不希望它位于顶部，而是“坚持”在名称的左侧，您将不得不添加另一个 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>

为什么底部文本不紧贴标题 (css)

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

html

css

responsive-design