再说了白点就是:父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己“领导”(父元素,祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防止它越级,假传圣旨,把自己的margin当领导的margin执行。 对于垂直外边距合并的...
最终效果:会发现在元素上面会有20px的空白,然而我们并没有对父元素设置margin,可见是子元素的 margin-top:20px 影响到了父元素。 二、原因:MDN的文档:如果没有边框border,内边距padding,行内内容,也没有创建块级格式上下文或清除浮动来分开一个块级元素的上边界margin-top 与其内一个或多个后代块级元素的上边界...
方案一:父元素 或者 子元设置display:inline-block ,打破条件一。 方案二:设置父元素padding-top 1 px ,打破条件二。 方案三:设置父元素border-top,打破可穿透条件(可理解为border 为内 容和margin中间的部分(参考盒子模型从内而外: content --> padding --> border --> margin),子元素设置margin后有父元素...
因为嵌套也属于毗邻,所以在样式表中优先级更高子元素的margin会覆盖外层父元素定义的margin。 父元素的第一个子元素的上边距margin-top如果碰不到有效的border或者padding.就会不断一层一层的找自己 “领导”(父元素,祖先元素)的麻烦。只要给领导设置个有效的 border或者padding就可以有效的管制这个目无领导的margin防...
css中子元素设置margin-top会影响到父元素 CSS demo代码: <!DOCTYPEhtml> index .content_top{ width:500px; height:80px; background-color:green; } .content_outer{ width:500px; height:500px; background-color:red; } .content{ width:
1.两个元素为同级元素,即当一个元素出现在另一个元素上面时,第一个元素的margin-bottom与第二个元素的margin-top发生合并,合并后的margin值是margin-bottom和margin-top中较大的那一个 2.当两个元素嵌套,即一个元素包含在另一个元素中时(假设没有padding或border把两个元素的margin分隔开),它们的margin-bottom...
margin: 0 auto; margin-top: 0; margin-bottom: 0; background-color: #DCF1B8; } .para { width: 20%; margin-left: auto; margin-right: auto; background-color: #734E4E; height: 50%; margin-top: 100px; margin-bottom: 100px; }...
我给子元素设置margin值,设置的应该是子元素与父元素之间的外边距,可是我写上之后,显示的是父元素与body元素的外边距,然后我给父元素加上了border-top:1px solid black,又达到了我预期的结果。 html: 没设置border-top时css: .header{ width: 100%; height: 80px; position: relative; } .nav{ border...
也没有空标签清浮动，总而言之就是没有触发BFC的时候，此时只给自己设置margin-top,会传递给父级，也...
body { margin: 0; } .d1 { background-color: #6183F3; height: 100px; } .da { background-color: #D60003; height: 200px; } .db { width: 200px; height: 200px; background-color: #FF8D8F; margin: 10px; } .dc { height: 100px;...