子元素的margin-top影响父元素原因和解决办法

这个问题会出现在所有浏览器当中，原因是css2.1盒子模型中规定，

In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.   所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之。毗邻的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding或Border分隔。

解决办法

给父元素加个padding-top:1px；

转载于:https://www.cnblogs.com/lijinwen/p/5838473.html

子元素的margin-top影响父元素原因和解决办法相关推荐

布局时margin会影响父元素
布局时margin会影响父元素.md 在布局使用margin时 <div class="login-bg"><div class="login" ...
子元素的margin-top会影响父元素
---恢复内容开始--- 之前在写项目的时候,发现原本想让父子元素之间加点边距,却让父元素产生了margin-top,于是百度之后发现了原因. 在css2.1盒模型中 In this specific ...
子元素margin-top为何会影响父元素？
https://blog.csdn.net/sinat_27088253/article/details/52954688 问题如下一段很简单的代码: css如下: <style type=& ...
HTML里子DIV设置margin-top后影响父DIV位置的解决办法
在HTML里,子DIV元素设置了margin-top后,在与父元素之间没有任何其他元素的情况下,会影响到父DIV的位置. 一.编写代码. <!DOCTYPE html> <html ...
鼠标光标变成黑块变粗导致影响输入的原因以及解决办法
鼠标光标变成黑块变粗,理论原因是不小心触发了电脑键盘某个键导致电脑进入了改写(覆盖)状态. 解决办法:据说是再按一次INSERT键.
margin折叠-从子元素margin-top影响父元素引出的问题
正在做一个手机端电商项目,顶部导航栈的布局是一个div包含一个子div,如果给在正常文档流中的子div一个垂直margin-top,神奇的现象出现了,两父子元素的边距没变,但父div跟着一起往下走了! ...
html盒子模型子元素怎么水平占满父元素_前端面试常考问题之css盒模型
一.题目:谈一谈你对CSS盒模型的认识专业的面试,一定会问 CSS 盒模型.对于这个题目,我们要回答一下几个方面: (1)基本概念:content.padding.margin. (2)标准盒模型. ...
html盒子模型子元素怎么水平占满父元素_CSS盒子模型、溢出处理、浮动、高度坍塌问题...
盒子模型 1.内容区 width 盒子内容区宽度 height 盒子内容区高度 background-color 背景颜色盒子可见大小由内容区,内边距和边框共同决定为元素设置边框,必须指定3个样式 ...
解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后，子元素不随着滚动条滚动的问题...
解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题在IE6,IE7下,子元素使用position:relative ...
[css] 父元素下有子元素，子元素也有高度但父元素的高度为何为0呢？分析下可能出现的原因及解决方法
[css] 父元素下有子元素,子元素也有高度但父元素的高度为何为0呢?分析下可能出现的原因及解决方法父元素塌陷父元素在文档流中高度默认是被子元素撑开的,当子元素脱离文档流以后,将无法撑起父元素的高度 ...

子元素的margin-top影响父元素原因和解决办法

子元素的margin-top影响父元素原因和解决办法相关推荐

最新文章

热门文章