使用span標記時，除去p標記內的空間

Question

如何將我的跨度直接放在p標簽內的文本下方

這是小提琴

http://jsfiddle.net/bobbyfrancisjoseph/H4U7r/

我也在這里粘貼HTML代碼

<p class="now-p" style="color:#000;">IN THEATERS NOW
    <br>
<span style="font-size:13px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Trailers,Songs,Ratings,Reviews & Comments</span>

    </br>
</p>

CSS如下。

.now-p {
    padding-bottom:10px;
    margin-bottom: 0px;
    color:#91979e;
    text-align:left;
    font-size:36px;
    font-weight:bold;
}

我試圖使輸出看起來像這樣：

                  IN THEATERS NOW 
     Trailers,Songs,Ratings,Reviews & Comments

現在在IN THEATERS之后有一個空間。 我無法擺脫這種情況

Answer 1

嘗試刪除您的中斷標記並將其添加到您的CSS：

.now-p span{
    display:block;
    font-size:13px;
}

Answer 2

space是由於<p>下的行中的<br> 。 如果您IN THEATERS NOW<br/>沒有空格，請不要再有問題了。

這可能不是實現您想要的最佳方式。 但我希望這有助於理解你遇到問題的原因。

Answer 3

跨度位於文本的正下方，它是文本第一行的行高，它導致行之間的間距。

設置第一個文本的行高以將它們組合在一起。 （並且您可以使用填充來縮進第二行而不是空格。）

HTML：

<p class="now-p" style="color:#000;">
  <span class="header">IN THEATERS NOW</span>
  <br>
  <span class="text">Trailers,Songs,Ratings,Reviews & Comments</span>
</p>

CSS：

.now-p {
  padding-bottom:10px;
  margin-bottom: 0px;
  color:#91979e;
  text-align:left;
  font-weight:bold;
}

.now-p .header {
  font-size: 36px;
  line-height: 35px;
}

.now-p .text {
  font-size: 13px;
  padding-left: 40px;
}

演示： http ： //jsfiddle.net/H4U7r/2/

Answer 4

使用CSS line-height

.now-p {
    line-height: 15px;
}