最近在整理巩固面试相关的资料,又看到了熟悉的老朋友:margin,当时觉得其读起来很亲切,现在又发现很多遗忘的知识点。
了解margin
margin,译为“外边缘”,在CSS作为属性定义元素周围的空间,从以下盒模型中能更好的理解margin。
属性 | 描述 |
---|---|
margin | 简写属性。在一个声明中设置所有外边距属性。 |
margin-bottom | 设置元素的下外边距。 |
margin-left | 设置元素的左外边距。 |
margin-right | 设置元素的右外边距。 |
margin-top | 设置元素的上外边距。 |
margin属性可以有一到四个值。
- margin:25px 50px 75px 100px;
- 上边距为25px
- 右边距为50px
- 下边距为75px
- 左边距为100px
- margin:25px 50px 75px;
- 上边距为25px
- 左右边距为50px
- 下边距为75px
- margin:25px 50px;
- 上下边距为25px
- 左右边距为50px
- margin:25px;
- 所有的4个边距都是25px
margin负值
- margin-top、left负值:元素向上、向左移动
- margin-right负值:右侧元素左移,自身不收影响;当右边无元素,其实就是缩小自身宽度。
- margin-bottom负值:下方元素上移,自身不受影响
margin塌陷
margin塌陷(又称margin重叠)指文档流内,块级元素与块级元素垂直方向上的 margin 合并(塌陷)为单个 margin,且只发生在垂直方向。行内元素不存在margin 塌陷,因为行内元素不占有外边距,同样道理float元素也不存在margin合并。
总结为:
- 相邻元素的margin-top和margin-bottom会发生重叠
- 空白内容的标签也会重叠
解决方案:
1.BFC块级格式化上下文,创建隔离的容器
<body>
<style>
.aa {
display: flex;
flex-direction: column;
width: 300px;
}
.bb {
width: 200px;
height: 200px;
border: 1px solid #333;
margin-top: 10px;
}
</style>
<div class="aa">
<div class="bb" style="margin-bottom: 10px;"></div>
<div class="bb" style="margin-top: 10px;"></div>
</div>
</body>
2.子元素浮动定位,父元素清除浮动
<body>
<style>
.aa {
border: 1px solid red;
}
.bb {
width: 200px;
height: 200px;
border: 1px solid #333;
}
.clearfix:after {
content:'';
display: table;
clear:both;
}
</style>
<div class="aa clearfix">
<div class="bb" style="margin-bottom: 10px;"></div>
<div class="bb" style="margin-top: 10px;float:left;"></div>
</div>
</body>
3.修改代码,添加空div,设置为flex布局
<body>
<style>
.aa {
border: 1px solid red;
}
.bb {
width: 200px;
height: 200px;
border: 1px solid #333;
}
</style>
<div class="aa">
<div class="bb" style="margin-bottom: 10px;"></div>
<div style="display: flex;"></div>
<div class="bb" style="margin-top: 10px;"></div>
</div>
</body>
更多参考:https://blog.csdn.net/Celester_best/article/details/127455732
标签:50px,元素,距为,25px,margin,玛珍,200px From: https://www.cnblogs.com/gfhcg/p/17978362