Question

在下面的代码中，左div块导航区域有填充，div块顶部的固定（或绝对）位置看起来像1em但左边没有填充与没有顶部或左边填充的另一个div内容块上的无填充进行比较。至少在Firefox和Chrome中都是如此。如何在position: absolute块上没有填充。注意：如果删除position: absolute，此问题将消失。我该如何解决？我知道我以后会想要填充，但我希望填充在导航和内容区域看起来正确，我希望它们看起来相同，没有填充作为基线。

这是一张图片。看看左边的有效区域是如何更厚，左边的内容区域是如何？

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>

Answer 1

如果你要分配职位：绝对;对任何元素，然后不应用margin属性。利用顶部，左侧，右侧，底部属性。

Answer 2

在http://www.webmasterworld.com/css/3083754.htm

找到答案

它需要在开头添加* {margin:0; padding:0}才能正常工作。

位置额外填充：绝对属性

2 个答案: