和父元素相同大小的子元素,设置了四边的Margin的子元素却向右侧平移了,请问是为什么啊啊啊啊……-问答-阿里云开发者社区-阿里云

开发者社区> 问答> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

2016-03-24 15:27:09 1802 1

代码是这样的:

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的什么属性?

取消 提交回答
全部回答(1)
  • a123456678
    2019-07-17 19:12:50

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

    0 0
相关问答

1

回答

行内元素和块级元素的具体区别是什么?行内元素的 padding 和 margin 可设置吗?

2019-11-18 14:51:37 905浏览量 回答数 1

0

回答

在线迁移公测申请需要提交白名单权限多久能开通?

2019-02-19 16:53:05 295浏览量 回答数 0

1

回答

你好,我尝试把阿里云免费企业邮箱账号设置在新买的Mac air的系统邮件箱里,但一直没有设置成功。

2018-03-23 18:20:26 2570浏览量 回答数 1

2

回答

企业邮箱没有"外域发信"项可设置,请问什么原因。

2018-01-20 23:14:39 2466浏览量 回答数 2

3

回答

请问下有阿里云主机 linux 的教程吗?配置环境那些的

2016-08-19 13:21:14 3796浏览量 回答数 3

1

回答

子元素设置了margin值,父元素也跟着动起来了?

2016-06-08 09:38:16 1928浏览量 回答数 1

1

回答

IE7父容器设置 margin-left 负值为什么会继承到子元素上面?

2016-06-03 10:31:30 1734浏览量 回答数 1

2

回答

阿里云的linux免费虚拟主机为什么一更改数据库就打不开啊

2016-05-04 10:15:44 6101浏览量 回答数 2

0

回答

云虚拟主机设置linux .htaccess限制IP访问的方法

2015-07-18 07:40:39 9002浏览量 回答数 0

1

回答

求助,阿里云邮箱能否像雅虎邮箱一样设置邮件预览功能,急!!!

2013-05-05 15:16:30 6059浏览量 回答数 1
+关注
文章
问答
问答排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载