HTML中的元素外边距

最新推荐文章于 2024-09-23 16:57:13 发布

xvzhengyang

最新推荐文章于 2024-09-23 16:57:13 发布

阅读量2.7k

点赞数

分类专栏： html css 前端文章标签： css 外边距

本文链接：https://blog.csdn.net/xvzhengyang/article/details/86440833

版权

前端同时被 3 个专栏收录

80 篇文章 0 订阅

订阅专栏

css

47 篇文章 0 订阅

订阅专栏

html

28 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>关于块元素</title>
		<!-- 一个元素嵌套到另一个元素,他们都有外边距,会折叠;
		1.只要两个垂直外边据碰到一起就会折叠,即使是一个元素嵌套到另一个元素中也不例外;但是
		如果外面的元素有一个边框,那么两个元素的外边距就不会碰到一起,这样就不会折叠;但是边框去掉就会折叠-->
		
		<!-- 浏览器:块元素,上下放置,外边距高度就是最大的外边距高度,譬如这里的first外边据是10px;second外边据是20px;那么
		这里两个块元素之间的距离是20px,切记.
		两个块元素之间的外边据就是二者中比较大的那一个;如果两个外边距是相同的那么就会折叠在一起;
		譬如都是10像素,那么总共也是10像素
		-->
		<style type="text/css">
			#first{
				width: 500px;
				height: 70px;
				background-color: #7FFFD4;
				margin-bottom: 20px;
				/* border: 2px solid red; */
			}
			#second{
				width: 500px;
				height: 70px;
				margin-top: 20px;
				background-color: #0000FF;
				border: thin solid red;
			}
			span{
				margin-left: 10px;
				margin-right: 10px;
			}
			#third{
				width: 100px;
				height: 30px;
				background-color: #FFFF00;
				margin-top: 10px;
			}
		</style>
	</head>
	<body>
		<div id="first">
			<span>
				第一个
			</span>
			<span>
				第二个
			</span>
			<br>
			内联元素: 左边外边据是10px ;右边外边据是10px;那么两个元素之间会有10+10也就是20px的空间
		</div>
		<div id="second">
			<div id="third">
				
			</div>
		</div>
		
	</body>
</html>