填充在 span 标签中不起作用

Question

好的，首先我想让你们都知道我已经尝试过使用 <span></span> 标签（尽管可能不正确）。

我对 <span></span> 标签做错了吗？还是我需要做一些完全不同的事情？

这是我当前的代码，用于创建没有 <br></br> 的空间：

 #beforeImage span {
  padding: 40px;
}

 <span id="beforeImage">text</span>

原文由 Keegan Brown 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

2 件事情要解决：

• 您将 CSS 应用于 ID 选择器的 span ，但您使用的是 span 以及 HTML 中 的 ID 选择器。

• span won’t have padding because it is an inline element by default, so set inline-block or block

片段

 #beforeImage {
  padding: 40px;
  display: inline-block; /* or block */
 /* demo */
  background: red

}

 <span id="beforeImage">Foo bar</span>

原文由 dippas 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

<span> 默认情况下是一个 inline 元素并且不会调整大小也不会接受垂直填充而不将其显示重置为内联块（或者但内联）。

您可能会寻找：

 span{
    display:inline-block;
    padding: 40px;
}

此外， br 仍然可以使用

 br {
  line-height:3em;
  vertical-align:top;/* debug FF/IE */
}

http://codepen.io/anon/pen/GoVdYY

但是，你真的需要一个额外的标签吗，你可以不对另一个元素应用底部边距或填充吗？

原文由 G-Cyrillus 发布，翻译遵循 CC BY-SA 3.0 许可协议