填充比所需的空间更多

Question

我在填充方面遇到了一个奇怪的错误。我正在创建一个两列布局，当我尝试向页脚div添加填充时，它占用的空间比我想要的多。我已经找到了这个问题，但找不到有用的答案。 例如，如果我在代码上放置1个像素：

#footer {
margin: 0.5em auto 0em auto;
background-color: #5f544d;
font-family: "Trebuchet MS";
width: 760px;
text-align: center;
padding: 1px 0.5em;
line-height: 1.1em;
}

我最终获得了超过1个像素的填充，如下所示：

顶部和底部填充物的高度超过1px。 所以我的问题是什么可能导致这个问题？

我已经将一段代码放在一个小提琴中，问题仍然存在，所以我想我所包含的代码就足以解决这个问题，如果它不是告诉我的话。 小提琴链接：http://jsfiddle.net/KhxAW/4/

Answer 1

问题在于您的<p>标记。它上面和下面有一个边距空间。我建议您在CSS代码中的某处重置<p>标记边距。

Answer 2

#footer {
margin: 0.5em auto 0em auto;
background-color: #5f544d;
font-family: "Trebuchet MS";
width: 760px;
text-align: center;
padding: 1px 0.5em;
line-height: 1.1em;
}

您在填充声明中没有使用像素作为单位...您正在使用EM＆＃39; s。 1EM等于父元素字体的PX大小。因此，如果您的字体大小为12px，则0.5em是6px。

只需将您的单位更改为PX ...

#footer {
margin: 0.5em auto 0em auto;
background-color: #5f544d;
font-family: "Trebuchet MS";
width: 760px;
text-align: center;
padding: 1px 5px;
line-height: 1.1em;
}

Answer 3

只需用这个替换你的页脚部分 - >

<div id="footer">
                <p style="display:inline">Three Rings for the Elven-kings under the sky, seven for the Dwarf-lords in their halls of stone,
                Nine for Mortal Men doomed to die, one for the Dark Lord on his dark throne, in the Land of Mordor 
                where the Shadows lie. One ring to rule them all, one ring to find them, one ring to bring them all 
                and in the darkness bind them, in the Land of Mordor where the Shadows lie.</p>
            </div>

Answer 4

如果在代码样式中包含以下内容

p.margin
{
margin: 0px;
}

and then inside your <p> tag you include the class="margin" like this:

<p class="margin">Three Rings for the Elven-kings ... </p>

You will be able to set the padding in the <div> tag without interference 
from the <p> tag.