HTML，CSS和垂直文本邊距

這可能是基本的東西，所以如果有某種HTML文本&邊距工作的在線參考，請給我一個鏈接。HTML，CSS和垂直文本邊距

無論如何，我在定義文本的確切邊距時遇到了一些麻煩。下面是一個圖像的例子，一個包含它下面的文本的div和div下的更多文本。其他邊距設置爲0，div的邊距爲10px top & bottom，0 left & right。由於我未知的原因，結果是16px頂部，14px底部。我可以用邊際定義補償誤差，但我實際上想知道發生了什麼，而不是治療症狀。

<img src="images/temp/img.png" /> 
<div><p>Testing</p></div> 
<h2>Siirry</h2>

和風格的DIV是

div { 
    color:#f00; 
    text-transform:uppercase; 
    font-size:9px; 
    line-height:9px; 
    height:9px; 
    margin:10px 0; 
    overflow:hidden; 
}

示例圖片：

Example

編輯：

更多信息，因爲我的觀點沒有明顯出來很顯然：保證金是10px根據到Firebug等工具。這不是我要問的。但是，由於字體呈現的方式，文本框實際上大於文本的實際大小。這會導致VISUAL邊距大於定義的邊距（您可以通過在Photoshop或相似軟件中對其進行測量來進行驗證）。我正在尋找關於文本框大小和實際大小之間關係的信息，所以我可以正確定義邊距。

來源

2011-05-31 teel

這是因爲字體沒有使用整個高度。一個更好的（儘管可能不是完美的）指示將是選擇文本並檢查黑色邊框和突出顯示的矩形之間的邊距。這也適用於'測試'下方的文本。它將佔用14px的一部分。

來源

2011-05-31 09:03:58 GolezTrol

是的，這就是我的意思與我的問題。我想了解背後的基礎知識，以便我可以更強有力地爲包含不同字體大小的文本設置精確的邊距。 – teel 2011-05-31 11:54:24

您已經設置了精確的邊距。字母和行首之間的空格不能在CSS中確定，因爲這是您正在使用的字體的屬性，甚至可能因字體版本而異，更不用說同一字體中的不同字符！你應該設計行高，而不是字體。如果出於特定原因，您需要從字母中測量確切的像素，則應該確實在繪圖工具中測量該距離，並在CSS中進行相應調整。但我認爲這應該是一個例外。 – GolezTrol 2011-05-31 16:40:46

在這種情況下，您應該測量字母的頂部和行的頂部之間的距離（如果文本被選中，您可以看到最佳的距離）。然後，從您想要的邊距中減去您測量的像素數量。所以，如果從'H'的頂部到選擇頂部的距離是3px，並且您希望邊距爲10px，則應該將邊距設置爲7px。如果這是兩行之間的餘量，則應從'j'的底部到選擇的底部進行類似的測量。然後，從原來的10px中減去兩個找到的值，以獲得您需要的實際邊距。 – GolezTrol 2011-05-31 16:47:33

我無法重現您的問題。您能否用http://jsfiddle.net/重新創建有問題的情況與我們分享？

但是，您的CSS存在問題。你不應該在div上指定9px的高度（由於頁邊空白，它的高度至少爲20px）。指定行高與字體的大小無關，而是與兩行文本之間的空間（不是你的情況）。

最後一件事：您用什麼來衡量邊距（16 & 14px）？一個圖像編輯器？你應該使用像Firebug或chrome開發工具。

來源

2011-05-31 09:13:54 solendil

是的，根據螢火蟲等，邊距是10px。我用Photoshop來測量它，因爲我需要文本和圖像的確切頂部之間的空間恰好爲10px，而不是瀏覽器認爲是10px。文本框通常大於字符的實際大小。 – teel 2011-05-31 11:44:23

Looks fine to me

這裏，我添加了一些背景，所以你能看到的箱子去：http://jsfiddle.net/Eric/fcHZN/3/

肯定有框之間的差距10px的。看起來您的額外間距來自您的圖片或Siirry文本，我們也沒有CSS。

來源

2011-05-31 09:19:16 Eric

如果您截取了該圖片並比較了Photoshop中文本和框之間的空格，則會看到該空間實際上不是10px。 – teel 2011-05-31 11:46:30

HTML，CSS和垂直文本邊距

回答

相關問題