小编Par*_*tik的帖子

我可能是新来em的CSS,但下面的例子似乎有些奇怪...

文档说1em等于font-size.我的例子中的所有内容都是默认的.所以8em应该是8行文字的大小,对吗？

#my-div {
  background-color: red;
  height: 8em;
}

<div id="my-div">
  One<br/>
  Two<br/>
  Three<br/>
  Four<br/>
  Five<br/>
  Six<br/>
  Seven<br/>
  Eight
</div>

有8条线,但8 em只有7 条线.它似乎1em只覆盖了一条线的7/8,或者某种东西......

为什么？我究竟做错了什么？

21
推荐指数

4
解决办法

907
查看次数

我试图了解垂直对齐的工作原理。在理解垂直对齐或“如何（不）垂直居中内容”中，它有一个<p>包含 a 的示例<span style="display: inline-block; vertical-align: middle">，它看起来像我期望的那样。

我搞砸了，我这样做了：

p {
  background: yellow
}

span {
  display: inline-block;
  vertical-align: middle;
  height: 50px;
  background: pink;
}

<p>
    Hello <span>What in the</span> World?
</p>

...但我没想到这个结果（运行代码片段看看）。为什么vertical-align只应用到后<span>，除了内容之外，其他所有内容都垂直对齐？<span>

我不想“修复”任何东西，但我想了解为什么会发生这种情况。这是预期的行为、错误还是其他什么？

css

Par*_*tik

2018 10-04

3
推荐指数

1
解决办法

246
查看次数

标签统计

css ×2

html ×1

小编Par_tik的帖子