CSS：在容器div

Question

我想知道，实现这一目标的最佳途径是什么：

我想要什么

而不是这个，这是默认情况：

如何将内联元素的顶部与其顶部的容器对齐？我刚看到很多答案和方法，我很困惑。什么是最佳做法？到目前为止，我只是使用了负余量，但对我来说，它看起来更像是一个肮脏而不稳定的技巧，而不是一个干净可靠的解决方案。

Answer 1

您希望修复的默认行为＆＃39;是因为计算计算机字体指标的方式。最近有关此主题的a very good article已发布。

你需要区分＆＃34; ascent＆＃34;度量和字体的资本高度以某种方式，然后通过此值向上移动文本。不幸的是，目前使用CSS是不可能的，所以一些硬编码字体特定的魔术数字＆＃39;这似乎是不可避免的。

Answer 2

完全取决于字体在普通大写字母之上有多少空间，例如为AAÄAA

上的点留出空间

但是有效的方法是将第一行或上边距相对的行高（在em中，以使其适合所有字体大小）减小到文本大小。只是稍微玩一下：

*::first-line {
    line-height: 0.7em;
}

Answer 3

您需要使用位置属性。以下是示例代码

#met {
font-size: 30px;
background-color: green;
float:left;
display:inline-block;
z-index: 1;
}
.na{
  position:relative;
}
.na p,
.na a {
  position:relative;
  top: -5px;
}
a {
 vertical-align:top;
}

#tim {
font-size: 20px;
background-color: blue;
}

Answer 4

第一部分可以使用line-height:21px;。即使在删除填充和边距后，也无法找到带有p标签的内容

＆＃13;

＆＃13;

#met {
font-size: 30px;
background-color: green;
float:left;
display:inline-block;

}

a {
 line-height:21px;
 vertical-align:top;
}

#tim {
font-size: 20px;
background-color: blue;
#met {
font-size: 30px;
background-color: green;
float:left;
display:inline-block;

}

a {
 line-height:21px;
 vertical-align:top;
}

#tim {
font-size: 20px;
background-color: blue;
margin: 0; padding: 0;
}

p{
  margin: 0;
  padding: 0;
  
}

＆＃13;

<div>
<div class="na" id="met">
  <a>TITLE</a>
</div>
<div class="na" id="tim">
  <p class="dummy">
  Dummy dummy dummy text<br>
    <span id="sp-dum">one two three it's a dummy</span>
  </p>
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 5

以风格写 vertical-align：top 是显示fopr所有列顶部所有内容的好方法