边距的合并与溢出

最新推荐文章于 2021-08-03 17:47:48 发布

心奔

最新推荐文章于 2021-08-03 17:47:48 发布

阅读量156

点赞数

分类专栏： CSS 文章标签：边距的合并与溢出

本文链接：https://blog.csdn.net/g960526/article/details/88921879

版权

CSS 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

边距的合并与溢出

盒子与盒子之间会出现两种情况，一个是边距的合并，一个是边距的溢出，那么什么是边距的合并与溢出呢，下面会详细介绍：

边距的合并：当上下相邻的两个元素，相邻的面同时拥有外边距时，其外边距值只会取其中较大的值
边距的溢出：当父子关系的两个元素，子级拥有上下边距时，其外边距不会作用于父级，而是会传递给父级

代码如下：

<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<title>边距的合并与溢出</title>
		<meta name="descrption" content="">
		<meta name="keywords" content="">
		<style type="text/css">
			.wrap{

				width:300px;
				height:300px;
				background-color:red;
				/* border-top:1px red solid; */
				/* padding-top:1px; */
				overflow:hidden;
			}
			.box{
				width:100px;
				height:100px;
				background-color:green;
				margin-top:200px;   /* 外边距为200px */
			}
			.top{
				width:100px;
				height:100px;
				background-color:red;
				margin-bottom:200px;
			}
			.bottom{
				width:100px;
				height:100px;
				background-color:green;
				margin-top:200px;
			}
		</style>
	</head>
		<!-- 
			1.外边距的溢出（父子级）
				子元素的上下边距会传递给父级而不是作用于父级
				解决这个问题：
				1.给父级加边框
				2.给父元素加一个内边距
				3.给父级加overflow:hidden;(内容超出处理)
			2.外边距的合并：（兄弟级）
				上下相邻的两个元素上下相对的外边距会进行合并（以值大的为准）
		-->
		<div class="wrap">
			<div class="box"></div>
		</div><br />
		<div class="top"></div>
		<div class="bottom"></div>

	<body>
	</body>
</html>

效果图如下：
在这里插入图片描述
此篇边距的合并溢出，主要是记住的是合并是作用于兄弟之间，而边距的溢出则是对于父子级而言。

心奔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
边距的合并与溢出

边距的合并与溢出盒子与盒子之间会出现两种情况，一个是边距的合并，一个是边距的溢出，那么什么是边距的合并与溢出呢，下面会详细介绍：边距的合并：当上下相邻的两个元素，相邻的面同时拥有外边距时，其外边距值只会取其中较大的值边距的溢出：当父子关系的两个元素，子级拥有上下边距时，其外边距不会作用于父级，而是会传递给父级代码如下：<!doctype html><html&gt...
复制链接

扫一扫