margin重叠--外边距折叠的出现场合及解决方法

行为定义

  外边距折叠:块的上外边距(margin-top)下外边距(margin-bottom)有时合并(折叠)为单个边距,其大小为单个边距的最大值(或如果它们相等,则仅为其中一个),这种行为称为边距折叠

出现外边距折叠的两种情况

  1.同级别块级元素之间:

当对于上下垂直的两个块级元素之间未设置浮动( ‘ float ’ 以及 ‘ position:absolute ’ )时

上方块级元素的margin-bottom与下方块级元素的margin-top就会发生合并:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title></title>
		<style type="text/css">
			/*上方的块级元素*/
			#box_one 
			{
				width: 200px;
				height: 200px;
				background-color: red;
				margin-bottom:200px ;
			}
			/*下方的块级元素*/
			#box_two
			{
				width: 200px;
				height: 200px;
				background-color: green;
				margin-top: 100px;
			}
		</style>
	</head>
	<body>
		<div id="box_one"></div>
		<div id="box_two"></div>
	</body>
</html>

 代码执行效果如下:

对于这个例子理解为边界回合并的话,根据代码距离应该是300px,但由于外边距合并的行为,距离为200px,取margin的最大值,即id值为box_one的盒子的margin-bottom值

解决方法:

1.设置浮动, ‘ float ’ 以及 ‘ position:absolute ’

2.父子级别元素之间

块级元素的父子元素之间,对于子元素设置margin-top值,父元素不进行设置,会出现子元素的margin-top值击穿父元素的现象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title></title>
		<style type="text/css">
			/*父元素的块级元素*/
			#box_one 
			{
				width: 200px;
				height: 200px;
				background-color: red;
			}
			/*子元素块级元素*/
			#box_two
			{
				width: 100px;
				height: 100px;
				background-color: green;
				margin-left: 100px;
			}
		</style>
	</head>
	<body>
		<div id="box_one">
			<div id="box_two"></div>
		</div>
	</body>
</html>

代码执行效果见下:

按照一般理解,子元素的margin-top会基于父元素出现外边距,但结果并不是这样,子元素的外边距margin-top会击穿父元素。

解决方法:

1.设置border边框 (例:border: 1px solid black)

2.设置padding,内边距

3.设置浮动

4.父元素加入(overflow: hidden);

总结

以上这些内容都是发生在Block-Level的元素,设定floating和absolutely positioned的元素完全不用担心边界重叠的问题。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值