06margin外边距基本使用

最新推荐文章于 2022-03-17 16:41:53 发布

IT小多

最新推荐文章于 2022-03-17 16:41:53 发布

阅读量352

点赞数

分类专栏： HTML_CSS学习日志文章标签：父子div的margin margin的基本使用 margin的上下叠压

本文链接：https://blog.csdn.net/u011975349/article/details/52316856

版权

HTML_CSS学习日志专栏收录该内容

11 篇文章 0 订阅

订阅专栏

margin外边距是一个区域块距离另一个区域块的尺寸

在使用时候需要注意一个div包含另一个div时候

1、上下外边距会叠压

当有两个div在一上一下时，如果给上div的下边距margin-bottom：30px 下div的margin-top：30px

实际的间距只有30px。而不是60px
2、父子级包含的时候子级的margin-top会传递给父级

（内边距代替外边距）

本打算让子div设置外边距作用于父div，结果子div的margin传递给了父div使得父div的margin-top变成了100

解决方法

子div使用内边距代替外边距padding-top: 100px完整代码如下

<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8"/>
	<title>margin</title>
	<style>
		#box1{
			width: 500px;
			height: 200px;
			background: blue;
			padding-top: 100px
		}
		#box2{
			width: 300px;
			height: 100px;
			background: yellow;
			/*margin-top: 100px;*/
		}
		/*
		margin 外边距
		外边距问题
		1、上下外边距会叠压
		2、父子级包含的时候子级的margin-top会传递给父级
		（内边距代替外边距）
		*/
	</style>
</head>
<body>
	<div id="box1">
			<div id="box2"></div>
	</div>
</body>
</html>