0

我有一个奇怪的填充错误。我正在创建一个两列布局，当我尝试向页脚 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 个像素的填充，如下所示： 在此处输入图像描述

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

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

4

4 回答 4

3

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

于 2013-04-12T18:06:48.413 回答
1

只需用这个替换您的页脚 div->

<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>
于 2013-04-12T18:18:06.263 回答
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;
}

您没有在填充声明中为您的单位使用像素......您正在使用 EM。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;
}
于 2013-04-12T18:02:16.913 回答
0

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

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.
于 2013-04-12T18:28:05.127 回答