.logo设置了margin属性会影响到包裹他的所有容器的margin值？

来源：3-4 编程练习

慕仰5025445

2020-06-13 10:53:15

我给.logo设置了margin属性，logo所在的父容器.header, .content也会产生出对应的margin边距，是容器内部的容器产生margin属性会影响到相关的容器？想问下什么情况下设置margin合适，什么情况下设置padding合适？？？

<!DOCTYPE html>

<html>

<head>

*{margin:0px;padding:0px;}

.content{width:1200px;margin: 0px auto;background: red;}

.header{background:#ccc;width: 90%;height: 200px;margin: 0px auto;}

.logo{width:240px;height:135px;margin:30px 50px; }

</style>

</head>

<body>

</ul>

</div>

</div>

</body>

</html>

写回答

1回答

好帮手慕码

2020-06-13

已采纳

同学你好，解答如下：

1、是的。这是由于子元素设置margin-top而导致父元素边距一起下落（边距下落）的现象，同学要记住这个现象；

2、可以设置内边距解决；也可以给父级.header添加overflow：hidden

3、"什么情况下设置margin合适，什么情况下设置padding",这里举个理解给同学理解下：

先设置padding ：

它是设置盒子与它里面内容之间的间距，并且它包含在盒子的实际宽度里面，观察一下它们的变化：

再设置margin：

margin是设置盒子与外界之间的间距，所以看到两个盒子之间会产生间距，两个盒子也都与浏览器左侧产生了间距。margin不包含在盒子的实际宽度中，所以盒子的大小没有变。

通过如上就能理解它的应用了哦。另外，有的时候它们两个可以实现同样的效果，此时用哪一个都行。例如如下两行文字挨着，想要文字产生一个间距

设置margin-bottom: 20px;可以实现两个盒子之间的间距，文字自然也就有间距了

设置 padding-bottom: 20px;虽然box1 和box2还是挨着的，但是box1的文字因为与box1自身产生了一个间距，所以文字与文字之间还是有间距的。所以效果一样的情况下，用哪一个都行哦

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

0 学习 · 40143 问题

查看课程

相似问题

设置了float之后，margin属性的变化？

回答 1

请教老师，2-10和2-11所讲的清除浮动的差别有疑问

回答 4

老师，为什么我设置的margin属性值并没有像前面那样叠加呢？

回答 1

清除浮动指清除哪里的浮动

回答 2

P标签不设置宽度和设置宽度，再使用float浮动出现图一图二两种排列效果，为什么会这样呢？

回答 1

打开慕课网App查看更多内容