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

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

css

Css 如何在不指定内部div高度的情况下，在内部div周围放置一致的5px边距？,css,Css,外部div包含一个固定宽度和可变高度的内部div。内部div与外部div之间的所有4条边上都应有5px的边距如果未指定内部div的高度，如何实现这一点对于指定的内部div的高度，这非常简单。但内部div是母版页的内容容器。对于使用母版页的每个页面，进入该div的内容将具有不同的高度如果未设置内部div高度，则底部边距（内部div端点和外部div端点之间）总是过长2-3倍。i、 e.5.8这种情况在浏览器类型之间发生以下是CSS： #contentframe { position:

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

如果未指定内部div的高度，如何实现这一点

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

如果未设置内部div高度，则底部边距（内部div端点和外部div端点之间）总是过长2-3倍。i、 e.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;

}

***注意：将#内容的边距底部设置为5px不起作用

HTML:


可变高度的内容将放在这里

这应该非常简单。设置：外部divs填充为5px，仅此而已。但这仅在指定了内部divs高度时有效。否则，就会有一个令人烦恼的“高”底限

编辑：完整源代码

<!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>


身体
{
-x-system-font：无；
背景色：#A2A2；
边际上限：0px；
边缘底部：35px；
填充：0px；
}
#中心框架
{
宽度：1010px；
左边距：自动；
右边距：自动；
边际上限：0px；
填充：0px；
}
#内容框架
{
位置：相对位置；
宽度：1010px；
左：0px；
顶部：0px；
边际：0px；
垫面：5px；
垫底：5px；
左侧填充：5px；
背景色：#ffffff；
}
#内容
{
位置：相对位置；
左：0px；
顶部：0px；
宽度：1005px；
边际：0px；
填充：0px；
高度：300px；
颜色：#ffffff；
背景色：#000000；
}
hGjGhGjGhJg
hGjGhGjGhJg
hGjGhGjGhJg
hGjGhGjGhJg

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

顶部和/或底部的额外“填充/边距”由

元素引入。这是由于空内容/填充/边框区域（在本例中为contentFrame）的展开边距造成的。请参阅有关折叠页边距的说明

有几种方法可以解决这个问题，其中之一是引入一个薄（1px）边框，将其混合到DIV的背景中，然后用宽度/高度进行补偿。下面是另一个通过操纵content 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: 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>


身体
{
-x-system-font：无；
背景色：#A2A2；
保证金：0；
边缘底部：35px；
填充：0px；
}
#中心框架
{
宽度：1010px；
边距：0自动；/*合并*/
填充：0；
}
#内容框架
{
宽度：1000px；
保证金：0；
填充物：5px；
背景色：#ffffff；
}
#内容
{
填充：0；
颜色：#ffffff；
背景色：#000000；
高度：自动；
最小高度：300px；
}
#内容p
{
边距：0px；/*删除了p元素的默认边距*/
填充：16px 0；/*替换为填充以具有背景*/
}
hGjGhJGhJG
hGjGhJGhJG
hGjGhJGhJG
hGjGhJGhJG

实际上，外部div有一个背景图像，可以在外部div边框周围进行很好的淡入淡出。左侧填充：14px用于实现内部div所需的5px偏移，即9px的淡入淡出5px的#ffffff。如果我将底部设置为5px，那么将针对什么进行注册？外部分区没有设置的高度，我希望它延伸到5px顶部偏移+内部分区高度（变量）+5px的高度。在这种情况下，您可以调整内容分区的顶部、右侧、左侧和底部值以满足您的需要。好的，所以我尝试了您的建议，但这只是增加了差异。i、你能看到12px的去向吗？例如，使用Firebug的HTML布局工具。这可能是由于内容的子元素或contentdiv本身的某个地方有额外的填充。尝试将填充设置为零。顺便说一句，12是左边的，这不是你想要的吗？不。我找不到任何使用Firebug来解释偏移量的东西。我在上面添加了一个完整的源文件，如果这样做能让事情变得更简单的话；（我还应该补充一点，简单地为内部分区指定边框是行不通的，因为“实际上”外部分区使用背景图像以获得更好的褪色/美学效果。为了简单起见，这里省略了它。因此问题不是如何在分区周围包括白色边框。这肯定是一个定位/大小问题。

<!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>