布局时margin会影响父元素.md

在布局使用margin时

<div class=”login-bg”><div class=”login”>12345</div>
</div><style>
.login-bg{background-color:red;width: 400px;height: 400px;margin: 0 auto;background: url(imac.png) no-repeat;background-size:400px 400px;
}
.login{background-color: #999;width: 300px;height: 200px;margin-top: 100px;
}
</style>

此时两个div都与上偏移了100px;

而不是我们所想要的.login偏移100px;

解决方法

给 login-bg Div 加上 padding/border，
或者给 login-bg Div / Inner Div 设置为 float/position:absolute(CSS2.1规定浮动元素和绝对定位元素不参与Margin折叠)

转载于:https://www.cnblogs.com/yunqianduan/p/4012826.html

布局时margin会影响父元素相关推荐

margin折叠-从子元素margin-top影响父元素引出的问题
正在做一个手机端电商项目,顶部导航栈的布局是一个div包含一个子div,如果给在正常文档流中的子div一个垂直margin-top,神奇的现象出现了,两父子元素的边距没变,但父div跟着一起往下走了! ...
【疑点】当子元素全部浮动时，怎么解决父元素塌陷的问题？
[疑点]当子元素全部浮动时,怎么解决父元素塌陷的问题? 参考文章: (1)[疑点]当子元素全部浮动时,怎么解决父元素塌陷的问题? (2)https://www.cnblogs.com/roashley ...
js margin作用到父元素_CSS中margin-top对父级元素产生作用的问题
在页面重构中,利用margin进行定位非常常见,然而margin-top这个属性经常会给我们带来一定的困扰,有时候不起作用,还把父层"拉"了下来,如图所示: 代码如下: test2 ...
子元素的margin-top影响父元素原因和解决办法
这个问题会出现在所有浏览器当中,原因是css2.1盒子模型中规定, In this specification, the expression collapsing margins means tha ...
子元素的margin-top会影响父元素
---恢复内容开始--- 之前在写项目的时候,发现原本想让父子元素之间加点边距,却让父元素产生了margin-top,于是百度之后发现了原因. 在css2.1盒模型中 In this specific ...
子元素应该margin-top为何会影响父元素【转】
这个问题困惑了很久,虽然没有大碍早就摸出来怎么搞定它,但始终不明白原因出在哪里,如果只是IE有问题我也不会太在意,可问题是所有上等浏览器都表现如此,这样叫我怎能安心?今天总算下狠心查出来怎么回事,居然 ...
MarginTop 为何影响父元素的 MarginTop
这个问题困惑了很久,虽然没有大碍早就摸出来怎么搞定它,但始终不明白原因出在哪里,如果只是IE有问题我也不会太在意,可问题是所有上等浏览器都表现如此,这样叫我怎能安心?今天总算下狠心查出来怎么回事,居然 ...
子元素margin-top为何会影响父元素？
https://blog.csdn.net/sinat_27088253/article/details/52954688 问题如下一段很简单的代码: css如下: <style type=& ...
js margin作用到父元素_JS margin边距
1 margin 属性设置元素的外边距. 该属性可使用 1 到 4 个值:  如果规定一个值,比如 div {margin: 50px} - 所有的外边距都是 50 px  如果规定两个值,比如 ...

布局时margin会影响父元素

布局时margin会影响父元素.md

解决方法

布局时margin会影响父元素相关推荐

最新文章

热门文章