盒子常见margin和padding问题详解
程序员文章站
2022-06-20 18:27:39
...
一、盒子嵌套竖直方向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值时，行内元素竖直方向内容范围扩大了，但是对周围元素无影响。说明行内元素竖直方向只有效果，但是不占有位置
解决详解：
- 浮动的元素不再遵循标准流中的规则，可以为所欲为了，所以行内元素竖直方向生效