body是内部div的父标记吗？
[英]Is body a parent tag for internal div?
问题描述
I've started to learn html and css and encountered some misunderstanding... Here is some code: 
我已经开始学习html和CSS，并遇到了一些误解...这是一些代码：
body { margin: 0px; } #red { background: red; width: 100px; height: 100px; margin-top: 55px; margin-left: 30px; } #green { background: green; width: 200px; height: 200px; margin-left: 15px; margin-top: 55px; }
<div id="red"></div> <div id="green"></div>
Here is the red and the green blocks. 这是红色和绿色块。 The red's margin-top is 55px. 红色的边距顶部为55px。 And it's calculated from the top of the screen (I think the parent is <html> here). 它是从屏幕顶部计算的（我认为此处的父级是<html> ）。 But parent for red block is obviously <body> . 但是红色块的父对象显然是<body> 。 So the question is, why does it happen? 所以问题是，为什么会发生呢？ Why margin is not calculated from the body? 为什么不从身体计算保证金？
2 个解决方案
解决方案1
3 2017-02-21 08:07:13
this is a classic case of 'margin-collapsing' in css 这是css中“ margin-colapsing”的经典案例
https://css-tricks.com/what-you-should-know-about-collapsing-margins/ .. https://css-tricks.com/what-you-should-know-about-collapsing-margins/ ..
you will find various articles about it .. 您会发现有关它的各种文章..
just try to give your body a border then you will see it doesnt happen.. 只要尝试给您的身体定界，您就会发现它没有发生。
read this for other ways to avoid this 阅读此文章以其他方式避免这种情况
How to disable margin-collapsing? 如何禁用保证金倒闭？
<!DOCTYPE> <html> <head> <title>Why, mr. Anderson?</title> <style type="text/css"> body { margin: 0px; border: 1px solid red; } #red { background:red; width: 100px; height: 100px; margin-top: 55px; margin-left: 30px; } #green { background:green; width: 200px; height: 200px; margin-left: 15px; margin-top: 55px; } </style> </head> <body> <div id="red"></div> <div id="green"></div> </body> </html>
解决方案2
1 已采纳 2017-02-21 09:14:47
This is called margin collapsing. 这称为保证金崩溃。
When an element with a margin is inside an element with no padding or border, the margin will be applied outside the parent element instead of between the child element and the parent edge. 当具有边距的元素位于没有填充或边框的元素内部时，该边距将应用于父元素之外，而不是子元素和父边之间。
The basic reason for this behaviour is that margin specifies the minimum distinace between elements, not a distance around an element like padding specifies distance around the element content. 此行为的基本原因是，边距指定了元素之间的最小距离，而不是元素周围的距离，如padding指定了元素内容周围的距离。
https://www.sitepoint.com/web-foundations/collapsing-margins/ https://www.sitepoint.com/web-foundations/collapsing-margins/
You can remove margin collapsing by the following ways: 您可以通过以下方式消除页边折叠：
- floated elements 浮动元素
- absolutely positioned elements 绝对定位的元素
- inline-block elements 内联块元素
- elements with overflow set to anything other than visible (They do not collapse margins with their children.) 溢出设置为可见以外的任何元素（它们不会与子元素折叠边距。）
- cleared elements (They do not collapse their top margins with their parent block's bottom margin.) 已清除元素（它们不会用其父块的底部边距折叠顶部边距。）
- the root element 根元素
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.