如何刪除div和span之間的空白

在這個jsFiddle中，您可以看到一個帶有一些span元素的div。如何刪除div和span之間的空白

爲什麼有第一線與頂格邊界線之間的差距？它是一個默認的行高？我的CSS課沒有設置行高。

http://h33i.img-up.net/Bildschirm4fda.png

如何刪除在不同的瀏覽器這個差距也有不同的字體？

<div id="draggable-title2"> 
<span style="color: rgb(0, 0, 0); font-family: verdana; font-size: 40px; padding-top: 0px;display: inline-block;"> 
    Hello World 
    <br />next line 
    </span> 
    </div>

來源

2013-10-29 sja87

瀏覽器將設置的line-height：正常，即使沒有你指定它。您可以降低它以減少線條之間的空間，但是我不會將它用於此目的，因爲文字不會很好地閱讀。負頂邊似乎是一種更好的方法。 – davidpauljunior

@davidpauljunior同意，說得好！ – Ruddy

[Agreed;） - @davidpauljunior]（http://stackoverflow.com/questions/19656088/how-can-i-remove-gap-between-div-and-span/19656289#19656289） – Nitesh

如果您只想修復到頂的間距解決這個問題，請檢查下面的解決方案。

WORKING DEMO

更改代碼：

<span style="color: rgb(0, 0, 0); font-family: verdana; font-size: 40px; padding-top: 0px;display: inline-block; margin-top:-10px;">

來源

2013-10-29 10:57:01 Nitesh

啊，我同意這個解決方案更多，然後任何其他。 – Ruddy

很好用。但我怎樣才能計算邊距-10px？我不認爲這適用於每種字體大小和每種字體。 – sja87

它適用於所有@ sja87。如果字體大小在％年齡等等，嘗試使用％年齡。 – Nitesh

在CSS添加此

span{ 
    padding:0; 
    line-height:30px; 
}

Demo

或者你用margin喜歡，

span{ 
    padding:0; 
    line-height:33px; 
    margin:-2px auto; 
}

Demo 1

來源

2013-10-29 10:54:45

這只是推動相互轉換。不會推薦它。這是如果你使用這種方法會發生什麼。 [Demo Here]（http://jsfiddle.net/Ruddy/9H9Tg/8/）這是一個很長的「L」。 – Ruddy

@Ruddy在這種情況下，您可以使用'line-height：33px'，這取決於。 –

然後，這會在頂部造成更大的差距，而文字並不會好得多。這只是玩一個不必要的平衡遊戲。這似乎不是解決此問題的最佳方法。 – Ruddy

您可以通過使用CSS line-height

DEMO

<span style="color: rgb(0, 0, 0); font-family: verdana; font-size: 40px; padding-top: 0px;display: inline-block;line-height: 30px;">

來源

2013-10-29 10:55:09 Selvamani

如何刪除div和span之間的空白

回答

相關問題