您好,匿名用户
随意问技术百科期待您的加入

和父元素相同大小的子元素,设置了四边的Margin的子元素却向右侧平移了,请问是为什么啊啊啊啊……

0 投票

代码是这样的:

CSS:

.test1 {
    background-color:green;
    width:500px; height:400px;
    /*border:10px solid yellow;*/
    /*position: absolute;*/
    margin:30px 0 0 30px;
}
.test2 {
    background-color:red;
    width:100%; height:100%;
    margin:30px;
}

HTML:

<div class="test1">
    <div class="test2"></div>
</div>

如上代码,在 Firefox 和 Chrome 中,子元素的margin-left都会在父容器里,子元素向右侧水平偏移,但是margin-top会从父容器溢出(也就是说,test1和test2有色彩的部分是等高的)。
按照我的理解,这样的CSS应该会让子元素向右下角偏移
看我注释掉的两条,取消任意一条的注释都能够让子元素的 margin-top 出现在父元素中
求教为什么会出现这样的情况?
究竟这两个CSS属性共同改变test1和test2的什么属性?

用户头像 提问 2012年 12月1日 @ Archer 上等兵 (494 威望)
分享到:

1个回答

0 投票

1.垂直边界重叠
2.这两个属性任意一个使得父元素拥有块级格式化范围,避免了垂直边界重叠的问题,具有类似功能的属性还有overflow:hidden;

用户头像 回复 2012年 12月1日 @ Teemo 上等兵 (318 威望)
提一个问题:

相关问题

0 投票
1 回复 34 阅读
0 投票
1 回复 32 阅读
0 投票
1 回复 40 阅读
0 投票
1 回复 46 阅读
+1 投票
1 回复 43 阅读
用户头像 提问 2012年 12月1日 @ Hades 上等兵 (152 威望)

欢迎来到随意问技术百科, 这是一个面向专业开发者的IT问答网站,提供途径助开发者查找IT技术方案,解决程序bug和网站运维难题等。
温馨提示:本网站禁止用户发布与IT技术无关的、粗浅的、毫无意义的或者违法国家法规的等不合理内容,谢谢支持。

欢迎访问随意问技术百科,为了给您提供更好的服务,请及时反馈您的意见。
...