【问题标题】：Element margin push parent element [duplicate]元素边距推送父元素[重复]
【发布时间】：2011-07-19 22:35:18
【问题描述】：

可能重复：
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 不将自身向下移动 100 像素，而是将整个构造移动这个值！？

Here is the working demo.

【问题讨论】：

我可以告诉你，CSS 不会是你长久以来最难的语言。

标签： css html

【解决方案1】：

如果您在谈论，为什么文本也被向下移动，这是因为文本进入了 desc div。如果不是，请稍微解释一下您的意思，谢谢。

【讨论】：

【解决方案2】：

因为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/

【讨论】：

【解决方案3】：

这与边距折叠有关（参考W3C spec）

this question of mine 的回答会对您有所帮助。

`overflow:auto` 似乎最好

【讨论】：

【解决方案4】：

欢迎来到Margin Collapsing:

人口：@oneat

这是 CSS 新手的常见问题。阅读 w3c 文档，或搜索边距折叠教程。

【讨论】：

你的答案装饰毫无意义。

【解决方案5】：

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

【讨论】：

【解决方案6】：

那是因为外层div没有内容，所以看起来好像不行。

使用位置：绝对；在 css 中或在#desc div 之外放置一些东西会显示给你。

【讨论】：

【解决方案7】：

由于您没有提供太多您真正想做的事情，我会尽力理解。我将假设您希望描述 div 低于父（包装）div 中的 ay 内容 100px。

您的主要问题是您的html body div{margin-left:auto;margin-right:auto;width:800px;} css 声明正在被页面上的所有 div 继承。我继续并切碎了您的一些代码，以使您更好地了解事物的放置方式。对 CSS 和 HTML 代码的另一个建议是尽量不要笼统地声明您的声明。明确一点，如您所见，我向父级添加了一个 id。这样您就可以像以前那样避免继承问题。无论如何，这是链接：

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

有很多方法可以用浮动或定位来做你想做的事，甚至可以像你做的那样，通过边距来做你想做的事。但请记住，其中任何一种方式都会有你会遇到的问题。

【讨论】：

【解决方案8】：

Collapsing Margins..

向<div style="background-color: silver"> 添加 1px 内边距@ 内边距停止边距“相邻”，如果它们不能相邻，它们就不能折叠。

我还建议将 Doctype 更改为：

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

你的那个是在IE7及以下触发怪癖模式，会导致更多的心痛;）

【讨论】：

overflow:auto 似乎最好

欢迎来到Margin Collapsing:

人口：@oneat

`overflow:auto` 似乎最好