填充不在span标签中工作

Question

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

我对<span></span>标签做错了吗？或者有什么我需要完全不同的做法？

以下是我目前使用<br></br>创建空间的代码：

＆＃13;

＆＃13;

#beforeImage span {
  padding: 40px;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

要解决的两件事：

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

• 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

可以简单地定位范围的Id：

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

或所有跨度：

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