如何在不指定内部 div 高度的情况下在内部 div 周围放置一致的 5px 边距？答案

【问题标题】：How to place a consistent 5px margin around an inner div without specifiying inner divs height?如何在不指定内部 div 高度的情况下在内部 div 周围放置一致的 5px 边距？
【发布时间】：2011-01-10 16:31:38
【问题描述】：

有一个固定宽度和可变高度的内部 div 包含在外部 div 中。内部 div 在它和外部 div 之间的所有 4 个边上都应该有 5px 的边距。

如果不指定内部div的高度，如何实现？

指定内部 div 的高度后，这非常简单。但内部 div 是母版页的内容容器。对于使用母版页的每个页面，进入此 div 的内容将具有不同的高度。

如果未设置内部 div 的高度，则底部边距（内部 div 结束位置和外部 div 结束位置之间）总是 2-3px 太长。即 5 5 5 8 这发生在不同的浏览器类型中。

这是 CSS：

#contentframe
{
    position: relative;
    width: 1010px;
    left: 0px;
    top: 0px;
    margin: 0px;
    padding-top:5px;
    padding-bottom:5px;
    padding-left: 14px;
}
#content
{
    position: relative;
    left: 0px;
    top: 0px;
    width: 980px;
    margin: 0px;
    padding: 0px;
    background-color: #cccccc;

}

*** 注意：将 #content 的 margin-bottom 设置为 5px 不起作用。

HTML：

    <div id="contentframe">
        <div id="content">
            variable height content will go in here
        </div>
    </div>

这应该很简单。设置：外部 div 填充到 5px 就是这样。但这仅在指定内部 div 高度时才有效。否则会有一个令人讨厌的“高”底边距。

编辑：完整来源

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css"> 
body
{
    -x-system-font: none;
    background-color: #A2A2A2;
    margin-top: 0px;
    margin-bottom: 35px;
    padding: 0px;
}
#centeredframe
{
    width: 1010px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    padding: 0px;
}

#contentframe
{
    position: relative;
    width: 1010px;
    left: 0px;
    top: 0px;
    margin: 0px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 5px;
    background-color: #ffffff;
}

#content
{
    position: relative;
    left: 0px;
    top: 0px;
    width: 1005px;
    margin: 0px;
    padding: 0px;
    height:300px;
    color: #ffffff;
    background-color: #000000;
}

</style>
</head>
<body>
    <div id="centeredframe">
        <div id="contentframe">
            <div id="content">
                <p>hgjghjghjghjg<p>
                <p>hgjghjghjghjg<p>
                <p>hgjghjghjghjg<p>
                <p>hgjghjghjghjg<p>
            </div>
        </div>
    </div>
</body>
</html>

【问题讨论】：

别告诉我我必须用脚本“修复”这个问题；(
我还应该在这一点上添加，taht 简单地为内部 div 指定边框是行不通的，因为“实际上”外部 div 使用背景图像来获得更好的褪色/美学效果。为简单起见，此处省略。所以问题不在于如何在 div 周围加上白色边框。这绝对是一个定位/尺寸问题。

标签： css

【解决方案1】：

这应该适用于 IE7/8 和其他非 IE 浏览器。

顶部和/或底部的额外“填充/边距”由<p> 元素引入。这是由于空内容/填充/边框区域（在本例中为 contentFrame）的未折叠边距。请参阅折叠边距上的W3C Box Model。

有几种方法可以绕过它，其中之一是引入一个细的 (1px) 边框，该边框与 DIV 的背景融为一体，然后用宽度/高度进行补偿。下面是通过在内容 DIV 中操纵 <P> 元素的边距/填充的另一个技巧。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css"> 
body
{
    -x-system-font: none;
    background-color: #A2A2A2;
    margin: 0;
    margin-bottom: 35px;
    padding: 0px;
}
#centeredframe
{
    width: 1010px;
    margin: 0 auto; /* merged */
    padding: 0;
}

#contentframe
{
    width: 1000px;
    margin: 0;
    padding: 5px;
    background-color: #ffffff;
}
#content
{
    padding: 0;
    color: #ffffff;
    background-color: #000000;
    height: auto;
    min-height: 300px;
}
#content p
{
    margin: 0px; /* removed the default margin of p element*/
    padding: 16px 0; /* replaced with padding to have background*/
}
</style>
</head>
<body>
    <div id="centeredframe">
        <div id="contentframe">
            <div id="content">
                <p>hgjghjghjghjg</p>
                <p>hgjghjghjghjg</p>
                <p>hgjghjghjghjg</p>
                <p>hgjghjghjghjg</p>
            </div>
        </div>
    </div>
</body>
</html>

【讨论】：

实际上有一个外部 div 的背景图像，它在外部 div 边框周围放置了一个很好的淡入淡出。 padding-left:14px 用于为内部 div 实现所需的 5px 偏移。即 9px 淡化 #ffffff 的 5px。如果我设置了 bottom:5px 那么注册的对象是什么？外部 div 没有设置高度，我希望它拉伸到 5px 顶部偏移 + 内部 div 高度（可变）+ 5 px 的高度。
在这种情况下，您可以根据需要调整内容 div 的顶部、右侧、左侧和底部值。
好的，所以我尝试了您的建议，但这只会增加差异。即 5 5 5 12.
你能看到 12px 的位置吗？例如。使用 Firebug 的 HTML 布局工具。这可能是由于内容的子元素或内容 div 本身的某处有额外的填充。尝试将填充设置为零。顺便说一句，12 是左边的，这不是你想要的吗？
没有。我找不到任何使用 Firebug 来解释偏移量的东西。我已经在上面添加了一个完整的源文件，如果这样可以让事情变得更容易。