欢迎使用Margin Collapsing：

Question

可能重复：
Margin on child element moves parent element

我在<div/>内对儿童元素的保证金有问题。孩子的保证金会影响父母：

<style type="text/css">
    html{width:100%}
    html body div{margin-left:auto;margin-right:auto;width:800px;}
    div#desc{margin-top:100px;background-color:white;width:500px;font-size:24px;}
    #photo{width:10px;height:10px}
</style>
<html>

  <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  </head>


  <body>
      <div>
    <div style="background-color: silver">
        <div id="desc">
        CSS<br/>
        IS<br/>
        THE<br/>
        HARDEST<br/>
        LANGUAGE<br/>
        EVER<br/>
        </div>
    </div>


     </div>
  </body>

</html>

为什么div#desc而不是将自己向下移动100px会使整个构造移动此值！？

Here is the working demo.

Answer 1

由于collapsing margins。

See another answer I wrote以各种方式“修复”它。

例如，在您的情况下，您可以将float: left添加到#desc的父级。

http://jsfiddle.net/jsK4y/10/

或padding：

http://jsfiddle.net/jsK4y/16/

或overflow未设置为visible：

http://jsfiddle.net/jsK4y/17/

Answer 2

Collapsing Margins..

添加1px填充到<div style="background-color: silver">填充停止边距“邻接”如果它们不能相邻，它们就不会崩溃。

我还建议将Doctype更改为：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">

你所拥有的是在IE7及以下版本中触发怪癖模式，会导致更多心痛;）

Answer 3

这与保证金折叠（参考W3C spec）

有关

this question of mine的答案对您有帮助。

`overflow:auto`似乎最好

Answer 4

欢迎使用Margin Collapsing：

人口：@oneat

这是CSS新手的常见问题。阅读w3c文档，或搜索margin-collapsing教程。

Answer 5

您看到collapsing margins生效了。上面链接的标准列出了各种条件。顺便说一句，<style>元素应该进入<head>。

Answer 6

那是因为外部div没有内容，因此看起来它不起作用。

使用position：absolute;在css或放置#desc div之外的东西会告诉你。

Answer 7

由于你没有提供你真正想做的事情，我会尽力去理解。我假设您希望描述div 100px低于父（换行）div中的内容。

您的主要问题是您的html body div{margin-left:auto;margin-right:auto;width:800px;} css声明是由页面上的所有div继承的。我继续编写了一些代码，以便更好地了解事情的处理方式。对CSS和HTML代码的另一个建议是尝试不对您的声明进行一般性处理。显而易见，正如您所看到的，我向父母添加了一个id。这样就可以像以前一样避免继承问题。无论如何，这是链接：

http://jsfiddle.net/jsK4y/15/

有许多方法可以通过浮点数或定位来实现您想要的效果，甚至可以通过边距来实现。但请记住，任何一种方式都会让你遇到问题。

Answer 8

如果你在谈论，为什么文本也会被移动，这是因为文本是desc div。如果没有，请更好地解释你的意思，谢谢。

元素边距推父元素

8 个答案:

`overflow:auto`似乎最好

欢迎使用Margin Collapsing：

人口：@oneat

元素边距推父元素

8 个答案:

overflow:auto似乎最好

欢迎使用Margin Collapsing：

人口：@oneat

`overflow:auto`似乎最好