額外的填充位置：絕對屬性

在以下代碼中，在div塊頂部具有固定（或絕對）位置的左側div塊填充區域看起來像1em，但在左側沒有填充沒有填充另一個div內容塊沒有頂部或左側填充。至少在Firefox和Chrome中是如此。我怎麼能在position: absolute塊沒有填充。注意：如果我刪除position: absolute，則此問題會消失。我該如何解決它？我知道我稍後需要填充，但我希望填充在nav和內容區域看起來正確，我希望它們看起來與沒有填充作爲基線相同。額外的填充位置：絕對屬性

這是一張圖片。看左邊的區域是如何變厚的，左邊的內容區域變薄了嗎？

enter image description here

下面是示例代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html> 
<head xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<style type="text/css"> 
    body { 
    background: #fff; 
    } 
    div.content { 
    background: #000; 
    margin-left: 20em; 
    margin-right: 4em; 
    border-radius: 2em; 
    } 
    p { 
    color: #fff; 
    } 
    div.nav { 
    background: #000; 
    width: 16em; 
    position: absolute; 
    left: 1em; 
    top: 1em; 
    border-radius: 2em 
    } 
</style> 
</head> 
<body> 
<div class="content"> 
    <p>This is content area text</p> 
</div> 
<div class="nav"> 
    <p>This is a nav area text</p> 
</div> 
</body> 
</html>

來源

2013-01-16 narnie

我做了一個[jsFiddle]（http://jsfiddle.net/8aSS6/）你的代碼，並且似乎沒有任何填充左邊的div。你確定填充不是來自其他地方嗎？ – Jason

以上是製作網頁的完整代碼。我直接從文件中複製它（添加4個代碼間距後）。 – narnie

我寫了另一個更簡單的一個，它做了同樣的事情，但沒有在jsFiddle中。 @Moose，你能否幫我一個忙，並嘗試從文件加載到Firefox的代碼？謝謝。我是在一臺完全不同的電腦上完成的，它也是這樣做的。 – narnie

-1

在這裏找到http://www.webmasterworld.com/css/3083754.htm

答案它需要添加到開頭的* {margin:0; padding:0}和它的作品的權利。

來源

2013-01-17 07:21:06 narnie

-1

如果你分配的位置：absoloute;到任何元素，則不要應用邊距屬性。利用頂部，左側，右側，底部屬性。

來源

2013-01-17 06:17:09

在上面的代碼中，''div'元素沒有margin屬性，它具有'position：absolute;'，它使用與'position'有關的'top'和'left'屬性。唯一有餘量的地方是正常工作的班級內容'div'。 – narnie

額外的填充位置：絕對屬性

回答

相關問題