盒子常见margin和padding问题详解

来源：互联网发布：python 处理日志文件编辑：程序博客网时间：2024/06/06 13:05

一、盒子嵌套竖直方向margin问题

问题：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        * {            margin: 0;            padding: 0;        }        .box1 {            width: 200px;            height: 200px;            background: red;        }        .box2 {            width: 100px;            height: 100px;            background: blue;            margin-top: 20px;        }    </style></head><body><div class="box1">    <div class="box2"></div></div></body></html>

这里写图片描述

解决方法：

给父元素浮动（float: left 或 right）
给父元素 overflow: hidden; 可能会将需要溢出的元素隐藏起来
给父元素 border-top : 1px solid transprent; 但是添加了一个边框边缘会有一些空白
给父盒子加padding值

解决结果：

这里写图片描述

总结：

问题原因：

一个父盒子如果没有padding-top和border-top，这个父盒子的margin-top会和其内部文档流中的第一个子元素的margin-top重叠

解决详解：

通俗讲，第一个子元素的margin-top作用在父元素上，这种情况存在于盒子上下级嵌套时，当父元素没有有效的padding-top或border-top时，第一个子元素的margin-top会一层一层找“领导”（祖先元素）的麻烦，只要给“领导”设置有效的padding或border，就可以管住子元素margin-top越级，假传圣旨，把自己的margin当领导的margin用

浮动和overflow: hidden触发了BFC。BFC元素特性表现原则是，内部子元素怎么翻江倒海，翻云覆雨都不会影响到外部的元素

二、竖直方向margin塌陷

问题：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        * {            margin: 0;            padding: 0;        }        .box1 {            width: 100px;            height: 100px;            background: red;            margin-bottom: 20px;        }        .box2 {            width: 100px;            height: 100px;            background: blue;            margin-top: 30px;        }    </style></head><body><div class="box1"></div><div class="box2"></div></body></html>

这里写图片描述

解决方法：

最佳方法是给上下两盒子各添加一个父盒子，父盒子添加overflow: hidden

解决结果：

这里写图片描述

总结：

问题原因：

外边距折叠（margin collapse）发生在普通流相邻兄弟元素（包括子元素）的竖直方向

外边距折叠有两种情况：一是父子外边距叠加，二是兄弟外边距叠加

解决详解：

外边距折叠发生在盒子margin是以最大的margin-top/bottom值为准

浮动和overflow:hidden触发了BFC，BFC在页面中就是一个独立的容器，容器里面的子元素不会影响外面的元素

三、行内元素标准流中margin竖直方向无效

问题：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        * {            margin: 0;            padding: 0;        }        .span1 {            float: left;            background: red;            margin: 20px;        }        .span2 {            background: green;            margin: 20px;        }    </style></head><body><span class="span1">span1</span><span class="span2">span2</span></body></html>

这里写图片描述

解决方法：

给当前行内元素浮动，margin-top与margin-bottom有效

解决结果：

见 span1

总结：

问题原因：

当在标准流中使用行内元素margin时，只有左右方向有效，当设置四个方向的margin值时，竖直方向margin无任何效果

解决详情：

给当前元素添加浮动，浮动后的元素脱离标准流不再受标准流中元素特性的影响

四、行内元素标准流中padding竖直方向无效

问题：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style type="text/css">        * {            margin: 0;            padding: 0;        }        .box1 {            width: 100px;            height: 100px;            background: brown;        }        .span1 {            /*float: left;*/            background: red;            padding: 20px;        }        .span2 {            background: green;        }        .span3 {            display: block;            width: 100px;            height: 100px;            background: gold;        }    </style></head><body><div class="box1">box1</div><span class="span1">span1</span><span class="span2">span2</span><span class="span3">span3</span></body></html>

这里写图片描述

解决方法：

给当前元素浮动，浮动后的元素不再受标准流盒子的影响

解决结果：

这里写图片描述

总结：

问题原因：

当使用行内元素padding的时候，只有左右方向有效，当设置四个方向的padding值时，行内元素竖直方向内容范围扩大了，但是对周围元素无影响。说明行内元素竖直方向只有效果，但是不占有位置

解决详解：

浮动的元素不再遵循标准流中的规则，可以为所欲为了，所以行内元素竖直方向生效

阅读全文

0 0