我想在固定位置设置顶部标题并在其下方滚动内容，但遇到了一些奇怪的情况。如果我为内容div设置边距顶部，该边距也会影响标题并将其向下移动，即使它设置为position:fixed。我通过将内容div设置为position:relative并使用top:将其偏移相同的量找到了一种解决方法，但我发现非嵌套div会影响固定位置的元素并想知道它发生的原因很奇怪.我在Safari、Firefox和Chrome中得到了同样的结果。在Opera中，页边距下推内容并保留页眉，这是我预期的结果，但与其他结果相比，可能是Opera出错了。我在说什么可以在thisJSFIDDLE中看到(不要使用Opera!:
我想在固定位置设置顶部标题并在其下方滚动内容，但遇到了一些奇怪的情况。如果我为内容div设置边距顶部，该边距也会影响标题并将其向下移动，即使它设置为position:fixed。我通过将内容div设置为position:relative并使用top:将其偏移相同的量找到了一种解决方法，但我发现非嵌套div会影响固定位置的元素并想知道它发生的原因很奇怪.我在Safari、Firefox和Chrome中得到了同样的结果。在Opera中，页边距下推内容并保留页眉，这是我预期的结果，但与其他结果相比，可能是Opera出错了。我在说什么可以在thisJSFIDDLE中看到(不要使用Opera!:
在设计布局时，我决定尝试将主要列的基于float的布局与子元素的基于表格的布局相结合。因此，我的html/css标记是沿着这些线的:HTML:...CSS:.column{float:left;display:table;width:15%;margin:2%;/*...*/}.sub-element{display:table-cell;/*...*/}具体的宽度和边距并不重要。参见thisjsFiddle作为引用示例。我看到发生的情况是，从左到右穿过页面的每个列block的边距都比上一个略小。由于没有额外的标记或CSS来实现这一点，我感到很困惑。在尝试了不同的值之后，我发现注释掉d
在设计布局时，我决定尝试将主要列的基于float的布局与子元素的基于表格的布局相结合。因此，我的html/css标记是沿着这些线的:HTML:...CSS:.column{float:left;display:table;width:15%;margin:2%;/*...*/}.sub-element{display:table-cell;/*...*/}具体的宽度和边距并不重要。参见thisjsFiddle作为引用示例。我看到发生的情况是，从左到右穿过页面的每个列block的边距都比上一个略小。由于没有额外的标记或CSS来实现这一点，我感到很困惑。在尝试了不同的值之后，我发现注释掉d
我有这样的效果:#div{background:green;width:200px;height:100px;}h1{margin-top:100px;}(显然有一些HTML可以配合它。)现在，当在浏览器中查看时，h1显示在#div的最顶部，100px边距位于#div。谁能给出一个理由？(代码有点太复杂，无法插入相关部分，所以如果没有人能给我答案，那么我会发布它，也许有人会发现错误或其他问题。) 最佳答案 这与H1标签无关。这就是我们所说的margin崩溃。您可以在此处找到有关此主题的帖子:http://reference.site
我有这样的效果:#div{background:green;width:200px;height:100px;}h1{margin-top:100px;}(显然有一些HTML可以配合它。)现在，当在浏览器中查看时，h1显示在#div的最顶部，100px边距位于#div。谁能给出一个理由？(代码有点太复杂，无法插入相关部分，所以如果没有人能给我答案，那么我会发布它，也许有人会发现错误或其他问题。) 最佳答案 这与H1标签无关。这就是我们所说的margin崩溃。您可以在此处找到有关此主题的帖子:http://reference.site
我明白为什么会发生边距崩溃；我在各种网站上看到了一些关于它是如何发生的以及为什么会发生的例子。具体来说，下面是我阅读的帖子的链接:https://css-tricks.com/almanac/properties/m/margin/清楚地解释了折叠是垂直发生的，并且它是出于某种目的而实现的。但是，有人提到Thisdoesnothappenonhorizontalmargins(leftandright),onlyvertical(topandbottom).没有解释为什么它不会发生在水平边距上。为什么不发生水平边距折叠？ 最佳答案
我明白为什么会发生边距崩溃；我在各种网站上看到了一些关于它是如何发生的以及为什么会发生的例子。具体来说，下面是我阅读的帖子的链接:https://css-tricks.com/almanac/properties/m/margin/清楚地解释了折叠是垂直发生的，并且它是出于某种目的而实现的。但是，有人提到Thisdoesnothappenonhorizontalmargins(leftandright),onlyvertical(topandbottom).没有解释为什么它不会发生在水平边距上。为什么不发生水平边距折叠？ 最佳答案
我在这里发布了一个演示http://jsfiddle.net/LxYMv/1/.如你所见从顶部div获取margin-top:10px，因此的黑色背景泄漏。这是否意味着我不能给topdiv一个正的margin-top？html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0}table{border-
我在这里发布了一个演示http://jsfiddle.net/LxYMv/1/.如你所见从顶部div获取margin-top:10px，因此的黑色背景泄漏。这是否意味着我不能给topdiv一个正的margin-top？html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,select,p,blockquote,th,td{margin:0;padding:0}table{border-
