神秘的CSS垂直空間
[英]Mysterious CSS vertical space
問題描述
從這個簡單的HTML。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hello</title>
<style type="text/css" media="screen">
.t1 {
padding: 0px;
margin: 0px;
}
.popup {
display: inline-block;
position: relative;
width: 0px;
padding: 0px;
margin-left: -0.5em;
}
.hint {
position: absolute;
z-index: 1;
width: 20em;
background-color: white;
border: 1px solid green;
padding: 0.5em;
margin-top: 1em;
}
.list {
padding: 0px;
padding-left: 1em;
margin: 0px;
}
</style>
</head>
<body>
<!-- properly layout -->
<div style="height: 10em;">
<span class="t1">MyObject o = www.mycompany.project.ObjectFactory.</span>
<div class="popup">
<div class="hint">
<ul class="list">
<li>NewSimpleObject(int x);</li>
<li>NewComplexObject(int x, int y);</li>
<li>NewComplicateObject(int x, int y, intz);</li>
</ul>
</div>
<div> </div> <!-- no idea why, but ending space is required for proper layout -->
</div>
</div>
<!-- incorrect layout -->
<div style="height: 10em;">
<span class="t1">MyObject o = www.mycompany.project.ObjectFactory.</span>
<!-- mysterious vertical space appear here -->
<div class="popup">
<div class="hint">
<ul class="list">
<li>NewSimpleObject(int x);</li>
<li>NewComplexObject(int x, int y);</li>
<li>NewComplicateObject(int x, int y, intz);</li>
</ul>
</div>
<!-- <div> </div> -->
</div>
</div>
</body>
</html>
結果如下：
alt text http://img23.imageshack.us/img23/6224/resultrendering.png
結果在瀏覽器中類似。 所以我相信這不是一個瀏覽器錯誤。
第二次渲染中文本行和彈出提示之間的垂直空間來自何處？ <div>＆nbsp; </ div>如何解決這個問題？
更新：
理查德M回答結論。 沒有內容的框沒有維度（ 內聯除外）。 <div>＆nbsp; </ div>使“popup”維度存在。
根據理查德的說法，更好的解決方案是使用內聯而不是內聯塊。 由於內聯的垂直維度無論其內容是否存在都是相同的
由於某些原因我還不知道，當切換到“內聯”時，不再需要margin-top：1em
更新2：
OH NO ..這個問題還沒有結束。 Richard M建議的更改（使用inline和刪除margin-top ）僅適用於Webkit瀏覽器（Chrome，Safari）在IE和Firefox上， popup框對齊左側而不是文本行。
問題中的第一個樣本（內聯塊和非空內容）可能是目前最可靠的選項。
更新3：
結論！ 此問題的真正原因源於這樣一個事實，即沒有內容的non-inline塊沒有維度。 Richard M建議使用inline來避免這個問題。 不幸的是，我發現這種解決方案在瀏覽器中不一致。 我想出了另一個相反方向的選項，使用帶有強制尺寸的inline-block通過height: 1px; 這在任何瀏覽器中都能正常工作
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Hello</title>
<style type="text/css" media="screen">
.t1 {
padding: 0;
margin: 0;
width: 0em;
}
.popup {
display: inline-block;
padding: 0;
margin: 0;
position: relative;
width: 0;
height: 1px; <!-- force vertical dimension -->
}
.hint {
position: absolute;
z-index: 1;
padding: 0;
margin: 0;
margin-top: 1px; <!-- compensate for the setup dimension -->
width: auto;
white-space: nowrap;
background-color: white;
border: 1px solid green;
}
.list {
padding: 0;
padding-left: 1em;
margin: 0.5em;
}
</style>
</head>
<body>
<!-- properly layout -->
<div style="height: 10em;">
<span class="t1">MyObject o = www.mycompany.project.ObjectFactory.</span><!--
whitespace is not welcome
--><div class="popup">
<div class="hint">
<ul class="list">
<li>NewSimpleObject(int x);</li>
<li>NewComplexObject(int x, int y);</li>
<li>NewComplicateObject(int x, int y, int z);</li>
</ul>
</div>
</div><!--
whitespace is not welcome
--><span>(1, 2, ...</span>
</div>
</body>
</html>
5 個解決方案
解決方案1
4 2010-02-22 15:52:46
這與以下事實有關：具有類popup的div不是具有position: absolute那個position: absolute ，而是它的子， hint 。
從瀏覽器的角度來看， popup div只包含hint時沒有內容 ，因此沒有維度。 <div> </div>給它內容並使hint彈出窗口在div的上邊緣正確啟動 - 但為什么會這樣，仍然逃避我，即使我確信有一個完美的邏輯解釋為了它 ：）
解決方案2
3 2010-02-22 15:54:18
它真正的意圖是：
<div style="clear:both;"></div>
而不只是：
<div> </div>
解決方案3
3 已采納 2010-02-22 16:18:48
你的.hint div有一個1em的上邊距可以將它“推”到文本行下面，但是在你的第二個實例中你的.popup div不包含任何東西（因為絕對定位的元素不占用任何空間）。 沒有內容的內聯塊div沒有高度或寬度，並且位於一行文本的基線上。 因此，您正在“推”掉底部而不是頂部，因此額外的1em垂直空間。 我真的不明白你為什么使用內聯塊，因為div的內容絕對定位，內聯也能正常工作。
回答您的問題編輯：使用我建議的內聯顯示應該可以工作，但您需要將絕對定位的.hint div的左側和頂部值設置為零。 此外，您需要刪除<div> </div>元素，否則最終會出現換行符（因為它不是內聯的）。
解決方案4
0 2010-02-22 15:47:30
您可以在提示上調整margin-top。 如果需要更正對齊，可以將其設置為負值。
解決方案5
0 2010-02-22 15:52:31
如果刪除margin-top：1em; 第二個布局將起作用。
編輯：替換margin-top：1em; 溢出：auto; 而且你不再需要div了。
CSS垂直間距問題（保證金？）-兩個Divs之間的垂直空間
[英]CSS Vertical Spacing Issue (Margin?) - Vertical Space Between Two Divs
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.