<span> 的填充

Question

span 标记当前在页面上同时具有垂直和水平 padding。我尝试使用它并确保它们适用于两个维度。

所以如果 span 是一个内联元素并且应该没有垂直填充，为什么要垂直添加它？那是因为它在块元素 div 中吗？还是其他原因？

提前致谢。

span {
  padding: 2rem 5rem;
}

<div>
  <h4>
    <span> Some text </span>
  </h4>
</div>

Answer 1

span 不会有 padding 因为它默认是一个 inline 元素，所以设置 inline-block 或 block.

#idk {
  padding: 60px;
  display: inline-block; /* or block */
  background: green
}

<span id="idk">idk</span>

Answer 2

<span> 元素默认为 display: inline。内联意味着，文本将与您 <h4> 中的所有其他内容保持在同一行（只要您的 h4 没有任何特殊样式）

因此，在您的情况下，可以添加填充（以及边距）。但仅添加 left 和 right 值。添加了 top 和 bottom，但被 h4 元素忽略。

这导致与 h4 保持相同的 line（因此 INline）。但是 div（h4 在里面）仍然会增长到底部。可悲的是，我无法解释为什么它没有增长到顶部并将 h4 推低。

我已经为你做了一个例子，其中填充和边距高得可笑 top/bottom:

span {
    padding: 100rem 5rem;
    margin: 100rem 5rem;
}

<div> 
    <h4>
      H4 with a special <span>WORD </span> inside!
    </h4> 
    <p>
    Something else
    </p>
</div>

Paddings for <span>