学习css 在用margin进行布局的时候，内层使用margin-top应该是相对于父层边框定位，为啥连父层也一起移动

Posted 2023-04-02

学习css 在用margin进行布局的时候，内层使用margin-top应该是相对于父层边框定位，为什么连父层也一起移动呢？？
谢谢亲哈

这个是CSS规范化的结果，在1999规范以前，所有元素都是默认有border的，或者说，即使border宽度为0，仍然可作定位使用。

现在的规范中，将对margin定义更明确化(外边距：与当前盒模型以外的最近一个盒模型的间距)，如果直接的父级盒模型在当前方向上没有border，就认为父级的范围也属于子标签的边框的一部分。 参考技术A 这种情况肯定是你代码有问题了，你用margin-top的话，父级元素有没有定义好，如果你只是在html里面定义了父级，又没有对其做任何样式定义的话，可能就会有这种情况。你好好检查自己代码看看 参考技术B 这种看你结构理解了 但也不是你理解错了 最好呢还是用在父级容器用padding-top 经验之谈 参考技术C 我不知道你所说的父层一起移动是什么概念，最好给你的代码贴出来。但父层如果包含子层的话，会被撑大这是正常的。
比如下面这个例子，你可以修改margin-top看看效果
<style>
#otherbackground-color:#1ddd00;height:100px;width:200
#fatherbackground-color:#ff0000;height:100px
#sonbackground-color:#ffff00;height:100px;margin-top:50px;width:100px;
</style>
<div id="other">其他div</div>
<div id="father">
父div
<div id="son">子div</div>
</div>本回答被提问者采纳

CSS---关于内层DIV设置margin-top不起作用的解决方案

关于内层DIV设置margin-top不起作用的解决方案

 

代码如下：

<div>上部层</div>

<div> <!--父层-->
     <div style="margin-top:200px;">子层</div>
</div>

理想中的效果是父层和上部层贴边显示，子层距离父层顶部有200px的距离，在ie中正常，但是在ff中却出现问题，子层和父层贴边了，而父层和上部层却间隔了200px。

百思不得其解，求助google，得到如下的一句：

当两个容器嵌套时,如果外层容器和内层容器之间没有别的元素,firefox会把内层元素的margin-top作用与父元素。

也就是说因为子层是父层的第一个非空子元素，所以使用margin-top会发生这个错误。

解决的办法有两个：

1、使用浮动来解决，即将子层代码改为：<div style="margin-top:200px;float:left";>子层</div>

2、使用padding-top来解决，即：

<div style="padding-top:200px;">
    <div>子层</div>
</div>