代码之家 › 专栏 › 技术社区 › Serhat Ozgel

非常简单的html的意外边距

css html

Serhat Ozgel · 技术社区 · 16 年前

我有一个非常简单的html。红色div位于蓝色div的内部,具有10px的上边距。在非ie浏览器上,蓝色框与视口顶部相距10 px,红色div位于蓝色div的最顶部。我期望的是ie行为:红色div必须与蓝色div的顶部相距10 px。为什么非ie浏览器呈现这样的效果?(我想错误的行为是IE的,但为什么?)

why blank? http://img92.imageshack.us/img92/7662/blankmr7.jpg

<html>
<head>
<style>
body { margin:0; padding:0; }
.outer
{
    background-color: #00f;
    height: 50px;    
}
.inner
{
    height: 20px;
    width: 20px;
    background-color: #f00;
    margin: 10px 0 0 10px;
}
</style>
</head>
<body>
<div class="outer">
    <div class="inner">
    </div>
</div>
</body>
</html>

5 回复 | 直到 15 年前

Community CDub 8 年前

和……一样多 strager's answer the CSS 2.1 specification 关于 collapsing margins .

他引用的观点解释了边距是如何折叠的,而不是如何“移动”到父元素。

如果框的顶部和底部边距相邻,则边距有可能通过框折叠。在这种情况下,元素的位置取决于其与边距被折叠的其他元素的关系。

如果元素的边距与其父元素的上边距折叠,则长方体的上边距将定义为与父元素的上边距相同。

或者,在 Mozilla developer documentation

父项和第一个/最后一个子项:

如果没有边框、填充、内联内容或间隙将块的页边距顶部与其第一个子块的页边距顶部分开,或者没有边框、填充、内联内容、高度、最小高度或最大高度将块的页边距底部与其最后一个子块的页边距底部分开,则这些页边距将折叠。折叠的页边距最终位于父页边距之外。

overflow: auto 解决方案 Chris Lloyd suggested

但这实际上取决于代码的其余部分是什么样子。在这个简单的示例中,您可以轻松地更改边缘将子元素添加到衬料

或者您可以浮动子元素,或者绝对定位它。。。

或者倒过来怎么样 clearfix 如果你想变得非常花哨:

.outer:before {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

strager 16 年前

利润率正在合并。IE产生的输出可能不正确。

在规格说明中(我目前正在考虑):

正常流动中两个或多个相邻的块盒垂直边缘塌陷。生成的边距宽度是相邻边距宽度的最大值。

Chris Lloyd 16 年前

这个问题有一个非常恰当的答案: overflow: auto;

<html>
<head>
<style>
body { margin:0; padding:0; }
.outer
{
    background-color: #00f;
    height: 50px;
    overflow: auto;
}
.inner
{
    height: 20px;
    width: 20px;
    background-color: #f00;
    margin: 10px 0 0 10px;
}
</style>
</head>
<body>
<div class="outer">
    <div class="inner">
    </div>
</div>
</body>
</html>

Morten Bergfall 16 年前

是否IE将DOM视为div.inner,并将div.outer视为其父节点(并计算其偏移量),
而其他浏览器却让它们都响应body元素?

Chris Lloyd 16 年前

好的,没有溢出的解决方案自动:

<html>
<head>
<style>
body { margin:0; padding:0; }
.outer
{
    background-color: #00f;
    height: 50px;
    border: 1px solid transparent;
}
.inner
{
    height: 20px;
    width: 20px;
    background-color: #f00;
    margin: 10px 0 0 10px;
    padding: 0;
}
</style>
</head>
<body>
<div class="outer">
    <div class="inner">
    </div>
</div>
</body>
</html>

内部元素需要一些东西来推动,并且提供一个BODER(或者强制浏览器考虑溢出)来做到这一点。

推荐文章

code-geek · Jquery根据单选按钮选择隐藏或显示文本字段

3 月前

Jamie · 在CSS链接的文件名中添加Jinja占位符

3 月前

ptownbro · 重叠分区标签,同时保持以下所有分区和内容就位

3 月前

Luke Frost IEng MIMechE · Bootstrap 5.3在Div中的项目位置没有如我所期望的那样显示

3 月前

Reegan · 使用Angular ngFor指令在html中渲染嵌套对象值

3 月前

wqyutv · 当找不到文件时,任何破坏错误的东西都不会出现,我该怎么解决这个问题?

4 月前

user29519291 · 为不同的变量创建一个带有可重用Click函数的简单菜单

4 月前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

4 月前

Lorenzo Bertolaccini · 在Angular项目中通过对话框后,在控制台中显示但在HTML中不显示的数据数组

4 月前

john Rizzo · 按钮背景颜色、悬停和活动状态存在问题

4 月前