10边距合并问题

最新推荐文章于 2023-07-31 21:48:48 发布

P_ning

最新推荐文章于 2023-07-31 21:48:48 发布

阅读量84

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/P_ning/article/details/90733197

版权

css 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

块之间的外边距合并(无法解决,要避免)


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
	.c1{
		width:500px;
		height:500px;
		background-color:#F00;
		margin-bottom:50px;
	}
	.c2{
		width:500px;
		height:500px;;
		background-color:#FC6;
		margin-top:100px;
	}

</style>
</head>

<body>
<div class="c1"></div>
<div class="c2"></div>
<!--如果两个块级元素相邻时,一个有下外边距,一个有上外边距,那这两个距离会合并成一个,大小为较大的那个边距-->
</body>
</html>

盒子嵌套的边距合并(可以解决)


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
	.c1{
		width:498px;
		height:498px;
		background-color:#FF0;
		border-top:1px #ff0 solid;
		<!--或者padding-top:1px;-->
	}
	.c2{
		width:100px;
		height:100px;
		background-color:#00F;
		margin-top:100px;	
	}
</style>
</head>

<body>
<div class="c1">
	<div class="c2">
    </div>
</div>
<!--如果两个嵌套的块元素中,父元素没有上内边距级边框,则父元素的上外边距会与子元素的上外边距合并,取较大值-->
<!--之和并上下,左右和合并-->
<!--即使父元素上外边距为0也会合并-->
<!--解决办法:
1.给父亲一个边框或或内边距,但注意两者都会撑大盒子,所以都要重新调整盒子大小
2.给父元素添加overflow:hidden;-->
</body>
</html>

padding不会撑开盒子的情况


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
	.c1{
		width:500px;
		height:500px;
		background-color:#FF0;
	<!--padding:50px;父亲以及定义了宽度,修改padding会撑开盒子-->

	}
	.c2{
		height:100px;
		background-color:#F00;
		margin:10px;
		padding:10px;
		padding:50px;
<!--子为未定义宽度,使用原本默认的宽度(也可以所说继承的父的宽度也可以说块元素独自占一行),即使改了也不会撑开盒子-->
	}
</style>
</head>

<body>
<div class="c1">
	<div class="c2">123</div>
</div>

<br>


<div class="c1">
	<div class="c2">123</div>	
</div>
</body>
</html>