元素边距推送父元素[重复]
Posted
技术标签:
【中文标题】元素边距推送父元素[重复]【英文标题】：Element margin push parent element [duplicate] 【发布时间】：2011-07-19 22:35:18 【问题描述】：可能重复：Margin on child element moves parent element
我在将边距应用于<div/> 内的子元素时遇到问题。孩子的边距会影响父母的：
<style type="text/css">
htmlwidth:100%
html body divmargin-left:auto;margin-right:auto;width:800px;
div#descmargin-top:100px;background-color:white;width:500px;font-size:24px;
#photowidth: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 不会是你长久以来最难的语言。 【参考方案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 divmargin-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及以下触发怪癖模式，会导致更多的心痛;）
【讨论】：
以上是关于元素边距推送父元素[重复]的主要内容，如果未能解决你的问题，请参考以下文章
38 内边距 padding 1 padding-top right left bottom 2 盒子的大小 3 设置padding内边距 子元素默认都是在父元素的内容区