填充在 span 标签中不起作用

Question

好的，首先我想让大家知道我已经尝试过使用<span></span> 标签（虽然可能不正确）。

<span></span> 标签有什么问题吗？或者有什么我需要完全不同的事情吗？

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

#beforeImage span {
  padding: 40px;
}

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

Answer 1

需要解决的两件事：

• 您将 CSS 应用于 ID 选择器的span ，但您在 HTML 中使用了span 和 ID 选择器。

• span不会有padding，因为默认是内联元素，所以设置inline-block或block

片段

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

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

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

但是，你真的需要一个额外的标签吗，你能不给另一个元素应用下边距或填充吗？

Answer 3

可以简单的定位到span的Id：

#beforeImage{
        display:inline-block;
        padding: 40px;
        }

或所有跨度：

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