獲取p標籤內使用span標籤時

這裏面的文字下面擺脫空間的小提琴

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

現在有現已上映後的空間。我無法擺脫的那個

來源

2013-04-26 Bobby Francis Joseph

跨度爲緊接在文本下方，它是導致行間距的文本第一行的行高度。

設置第一個文本的行高以將它們放在一起。（你也可以使用填充來縮進第二行，而不是空格。）

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/

來源

2013-04-26 08:19:08 Guffa

嘗試刪除您的假期標籤，並添加到您的CSS：

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

來源

2013-04-26 08:06:43

由於工作就像魅力..我無法接受九分鐘的答案.. – 2013-04-26 08:09:24

這似乎給出了預期的效果，但這是如何工作的？爲什麼塊會侵入第一行的行高？ – Guffa 2013-04-26 08:25:47

標籤是問題，您應該避免使用
標籤進行佈局。這會將標記轉換爲塊元素並將其壓入下一行。兩條線之間的間距可以用上的線高或填充來設置。 – 2013-04-26 08:37:20

使用CSS line-height

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

來源

2013-04-26 08:07:31

的space是由於<br>中該行下的<p>。如果你把IN THEATERS NOW<br/>沒有空格，那就沒有問題了。

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

來源

2013-04-26 08:12:46 Xaltar

當我嘗試時，我看不出任何區別。 – Guffa 2013-04-26 08:28:15

獲取p標籤內使用span標籤時

回答

相關問題