为什么底部文本不粘在标题上（css）答案

【问题标题】：Why the bottom text doesn't stick to heading (css)为什么底部文本不粘在标题上（css）
【发布时间】：2021-11-03 17:53:13
【问题描述】：

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

【问题讨论】：

什么是棒？

标签： html css responsive-design

【解决方案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>

【讨论】：