html 盒子模型基础（外边距的重叠问题详解）（三）

最新推荐文章于 2024-01-05 07:45:00 发布

咸鸭蛋炒饭

最新推荐文章于 2024-01-05 07:45:00 发布

阅读量3.5k

点赞数 2

分类专栏： HTML5基础篇文章标签： css html 经验

本文链接：https://blog.csdn.net/u010853130/article/details/54906353

版权

HTML5基础篇专栏收录该内容

121 篇文章 7 订阅

订阅专栏

1.外边距的重叠问题

<!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: blue;
				/*为下边的元素设置一个上外边距*/
				margin-top: 100px;
				
				/*
				 	垂直方向的相邻的外边距会发生外边距的重叠现象
				 		兄弟元素的相邻外边距会取最大值
				 		父子元素的相邻外边距会传递给父元素	
				 * 
				 * */
		 	}
			
			.left{
				background-color: yellow;
				/*为左侧的span设置一个右外边距*/
				margin-right: 100px;
			}
			
			.right{
				/*
				 	水平方向的相邻外边距不会发生重叠，而是求和
				 * */
				background-color: yellowgreen;
				/*为右侧的span设置一个左外边距*/
				margin-left: 100px;
			}
			
			.box3{
				width: 300px;
				height: 200px;
				background-color: skyblue;
				/*border: 1px red solid;*/
				/*padding-top: 1px;*/
				padding-top: 100px;
			}
			
			.box4{
				width: 100px;
				height: 100px;
				background-color: red;
				/*设置一个margin-top*/
				/*margin-top: 100px;*/
			}
			
		</style>
	</head>
	<body>
		
		<div class="box3">
			<div class="box4"></div>
		</div>
		
		<br /><br /><br /><br />
		<div class="box1"></div>
		<div class="box2"></div>
		
		<!--<span class="left">我是左侧的span</span><span class="right">我是右侧的span</span>-->
		
	</body>
</html>

效果：

咸鸭蛋炒饭

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
html 盒子模型基础（外边距的重叠问题详解）（三）

1.外边距的重叠问题 .box1{ width: 100px; height: 100px; background-color: red; /*为上边的元素设置一个下外边距*/ margin-bottom: 100px; } .box2{ width: 100px; heig
复制链接

扫一扫