margin注意事项浅谈

谈到margin，开始以为只是个简单的外边距定位属性，现在发现此元素依旧有“小秘密”。关于margin，我们得要了解什么事盒子模型（box model）
如图：
在这里插入图片描述
由此可知：padding和margin都是透明的。在此讨论盒子在水平和垂直位置margin不同时，真正的margin距离。

一，兄弟盒子在水平和垂直位置margin不同时
（1）兄弟盒子在垂直位置margin不同时
示例代码：

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,inital-scale=1.0,minimun-scale=1.0,maximun-scale=1.0" />
		<title>The careful of margin</title>
		<style>
			
			*{
				margin: 0px;
				padding: 0px;
			}
			
			.box1{
				width: 150px;
				height: 150px;
				background-color: #669966;
				margin-bottom: 100px;
			}
			
			.box2{
				width: 150px;
				height: 150px;
				background-color: green;
				margin-top: 50px;
			}
			
		</style>
	</head>
	<body>
		<div class="box1">This a box1</div>
		<div class="box2">This a box2</div>
	</body>
</html>

运行截图：
在这里插入图片描述
由图可知：两者的上下间距并没有是数字间相加的150px,然而却是100px,这是为圣莫捏。。。。
如果简单的死记“两者之中挑最大”，那就其实很容易忘。追本述源，margin的定义是外边距—不同容器边距与边距的距离。
就此结果而言，box1的margin-bottom是100px,就说明它与它下一级的容器（这里是box1）边距间隔为100px。
如图：
在这里插入图片描述
黄色区域就是边距间隔100px.
box2的margin-top是50px,有人想问，这不就加起来150px吗?我们看看结果
如图：

这里的黄色区域就是box2的边距间隔。
我们可以折磨理解：当box1存在margin-bottom=100px时，我们更换对象，讨论box2,想想此时的box2是不是就产生了它的上外边距为100px,只是我们没有设置罢了。所以就算box2设置margin-top=90px，结果依旧不变。
如图：
在这里插入图片描述
结果依旧没变，只是黄色区域变大。
（2）水平间距，以此类同。

菜鸟爬行中…

margin注意事项浅谈

猜你喜欢