外边距的折叠

最新推荐文章于 2024-09-03 21:30:40 发布

-王二毛-

最新推荐文章于 2024-09-03 21:30:40 发布

阅读量187

点赞数

分类专栏： # css 文章标签： windows angular.js 前端

本文链接：https://blog.csdn.net/weixin_45084986/article/details/123837176

版权

css 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

外边距的折叠

<style type="text/css">
		.box1,
		.box2 {
			width: 200px;
			height: 200px;
			font-size: 100px;
		}
/* 垂直外边距的重叠(折叠)
相邻的垂直方向外边距会发生重叠现象|
-兄弟元素
    -兄弟元素间的相邻垂直外边距会取两者之间的较大值（都是正值时）
	-特殊情况：
		一正一负取和
		相邻的外边距都是负值，取绝对值大的
		
-父子元素
	-父子元素间相邻外边距，子元素的会传递给父元素( 上外边距)
	-父子外边距的折叠会影响到页面的布局，必须要进行处理
 */
		.box1 {
			background-color: #bfa;
			/*设置一个下外边距*/
			margin-bottom: 100px;
		}
		.box2 {
			background-color: orange;
			/*设置一个上外边距*/
			margin-top: 100px;
		}
		/*box1和box2只有100px距离，即发生外边距折叠（重合）*/
		.box3 {
			width: 200px;
			height: 200px;
			background-color: #bfa;

		}

		.box4 {
			width: 100px;
			height: 100px;
			background-color: orange;
			margin-top: 100px;
		}
		/* .box3 {
			width: 200px;
			height: 100px;
			background-color: #bfa;
			padding-top: 100px;
		}

		.box4 {
			width: 100px;
			height: 100px;
			background-color: orange;
			/* margin-top: 100px; */ */
	</style>
	<body>
		<!-- <div class="box1"></div>
		<div class="box2"></div> -->
		<div class="box3">
			<div class="box4"></div>
		</div>
	</body>

父子之间
在这里插入图片描述

外边距折叠的解决方案

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>外边距解决问题</title>
    <style type="text/css">
        .box1 {
            width: 200px;
            height: 200px;
            background-color: aquamarine
        }
       
        .box2 {
            width: 100px;
            height: 100px;
            background-color: bisque;
            margin-top: 100px;
        }
        /* learfix 这个样式可以同时解决高度塌陷外边距重叠的问题，当你在遇到这些问题时，直接使用clearfix这个类即可*/
        .clearfix::before,
        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }
    </style>
</head>

<body>
    <div class="box1 clearfix">
        <div class="box2"></div>
    </div>
</body>

</html>