玛珍,玛珍,margin!

最近在整理巩固面试相关的资料,又看到了熟悉的老朋友: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块级格式化上下文,创建隔离的容器

html 复制代码
<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.子元素浮动定位,父元素清除浮动

html 复制代码
<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布局

html 复制代码
<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