相关疑难解决方法(0)

我有div(父)包含另一个div(孩子).Parent是body没有特定CSS样式的第一个元素.当我设置

.child
{
    margin-top: 10px;
}

最终的结果是我的孩子的顶部仍然与父母对齐.我的父母向下移动10px,而不是让孩子向下移动10px.

我的目标DOCTYPE是XHTML Transitional.

我在这里错过了什么？

编辑1
我的父母需要有严格定义的尺寸,因为它的背景必须从上到下显示在它下面(像素完美).因此,设置垂直边距是不行的.

编辑2
此行为在FF,IE和CR上是相同的.

我尝试在另一个div内的div上添加边距值.一切正常,除了最高值,它似乎被忽略了.但为什么？

我的期望:

我得到了什么:

码:

#outer {
    	width: 500px; 
    	height: 200px; 
    	background: #FFCCCC;
    	margin: 50px auto 0 auto;
    	display: block;
}
#inner {
    	background: #FFCC33;
    	margin: 50px 50px 50px 50px;
    	padding: 10px;
    	display: block;
}

<div id="outer">
  <div id="inner">
  	Hello world!
  </div>
</div>

W3Schools没有解释为什么保证金的行为方式.

当具有边距的元素包含在另一个元素中时,父元素不会始终包装该边距.

很多事情会导致父母包裹孩子的边缘:

• 边界:固体;
• 位置:绝对的;
• 显示:内联块;
• 溢出:汽车

(这只是来自小型测试,毫无疑问还有更多.)

我认为这与折叠边距有关,但是:

1. W3C规范页面没有此类行为的描述.
2. 这里没有重叠的边距.
3. 在这个问题上,所有浏览器的行为似乎都是一致的.
4. 行为受与边距无关的触发器的影响

默认溢出的元素的逻辑是什么:auto应该包含与溢出设置为auto的材料不同的材料.

为什么除了常规div的默认行为之外的所有内容都假定父级包含保证金 - 为什么常规默认值不包括保证金？

编辑:最后的答案是W3C确实指定了这种行为,但那

• 这些规格没有任何意义.
• 规格混合,没有任何解释:
  • '自由边距'(触及父母顶部或底部的边距不包含在父母的内部)和
  • '折叠边距'(允许相邻边距重叠).

演示:

body {
  margin: 0;
}

div.block {
  background-color: skyblue;
}
div.inline-block {
  display: inline-block;
  background-color: lawngreen;
}
div.position-absolute {
  background-color: rgba(255,255,0,.7);
  position: absolute;
  bottom: 0;
  right: 0;
}
div.overflow-auto {
  background-color: hotpink;
  overflow: auto;
}
div.border {
  background-color: aquamarine;
  border: solid;
}

h2 {
  margin: 80px;
  width: 250px;
  border: solid;
}

我有三个嵌套的 DIV 元素，如下所示：

<div id="outer">
    <div id="innerA">
        <div id="innerB">
            This<br/>is<br/>a<br/>multiline<br/>testcase.<br/>
            This<br/>is<br/>a<br/>multiline<br/>testcase.<br/>
        </div>
    </div>
</div>

#innerA的高度100%使其与 一样大#outer。#innerB的高度保持不变，auto因此它的高度与其内容一样高。现在，当我设置#innerB为margin-top: 10px例如时，我预计#innerB将获得相对于 的余量#innerA。相反，会发生的情况是，#innerA获得与 相关的余量#outer。

这怎么可能？看来这与box-sizing至少它无法通过这种方式修复无关。

这是 CSS：

#outer {
    width: 500px;
    height: 300px;
    background: yellow;
    overflow: auto;
}

#innerA {
    width: 100%;
    height: 100%;    
    background: green;
}

#innerB {
    margin-top: 10px;
    background: blue;
}

和小提琴：

http://jsfiddle.net/7e2H5/

（在这里，我希望绿色 DIV 适合黄色 DIV，并且在蓝色 DIV 上方可见绿色 …

我正在网站上工作,我注意到我的页面顶部和底部有一个无法解释的空白区域.我搜索了一些帖子,他们告诉我确保我使用了没有BOM的UTF-8编码,我尝试了它并没有区别.如果有人愿意看它,网址就是网址