垂直外边距的重叠

最新推荐文章于 2022-04-25 19:27:13 发布

chen_zan_yu_

最新推荐文章于 2022-04-25 19:27:13 发布

阅读量574

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/chen_zan_yu_/article/details/89740857

版权

CSS 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box1{
				width:100px;
				height: 100px;
				background-color: red;
				/*
				 * 为上边的元素设置一个下边外边距
				 */
				margin-bottom: 100px;
			}
			/*
			 * 垂直外边距的重叠
			 * 		-在网页垂直方向的相邻垂直方向的外边距会发生外边距的重叠
			 * 			所谓的外边距重叠指兄弟元素之间的相邻外边距会取最大值而不是取和
			 * 			如果父子元素的垂直外边距相邻了，则子元素的外边距会设置给父元素
			 * 
			 */
			.box2{
				width: 100px;
				height: 100px;
				background-color: green;
				/*
				 * 为下边元素设置一个上外边距
				 */
				margin-bottom: 100px;
			}
			.box3{
				width: 200px;
				height: 100px;
				background-color:royalblue;
				/*
				 * 为box3设置一个上边框
				 * 
				 */
				/*border-top: 1px red solid;*/
				/*padding-top: 1px;*/
				
				padding-top: 100px;
			}
			
		   .box4{
				width: 100px;
				height: 100px;
				background-color: yellowgreen;
				/*
				 * 为子元素设置
				 */
			/*margin-top: 100px;*/
			
			}
		</style>
	</head>
	<body>
		<div class="box3">
			<div class="box4"></div>	
		</div>
		
		<div class="box1">
		</div>
		
		<div class="box2">
			
		</div>
		
	</body>
</html>

效果图：

chen_zan_yu_

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
垂直外边距的重叠

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .box1{ width:100px; height: 100px; backgro...
复制链接

扫一扫