Html CSS最高保证金问题_Html_Css_Google Chrome

Html CSS最高保证金问题

html css google-chrome

Html CSS最高保证金问题,html,css,google-chrome,Html,Css,Google Chrome,有人知道为什么我在第一部分没有根据下面的CSS获得最高利润吗？在Mac OSX Lion上运行的Chrome、Safari和Firefox 4中呈现相同的效果（在雪豹中呈现相同效果）。我希望第一个项目显示一个5px的边距围绕着内部div（除了底部），而不仅仅是在右边和左边。为什么利润率不也适用于顶部？即使我在CSS中指定margin-top:5px，它仍然不会像我预期的那样呈现 <!DOCTYPE html> <html> <head>

有人知道为什么我在第一部分没有根据下面的CSS获得最高利润吗？在Mac OSX Lion上运行的Chrome、Safari和Firefox 4中呈现相同的效果（在雪豹中呈现相同效果）。我希望第一个项目显示一个5px的边距围绕着内部div（除了底部），而不仅仅是在右边和左边。为什么利润率不也适用于顶部？即使我在CSS中指定margin-top:5px，它仍然不会像我预期的那样呈现

<!DOCTYPE html>
<html>

    <head>
        <style>
        .outer{
            background-color:red;
            width:100px;
            height:100px;
            margin-bottom:20px;
        }

        .inner{
            background-color:white;
            margin:5px;
        }

        .shim{
            height:1px;
        }

        .outer2{
            background-color:red;
            width:100px;
            height:100px;
            margin-bottom:20px;
            padding:5px;
        }

        .inner2{
            background-color:white;
        }
        </style>
    </head>

    <body>

        <div class="outer">
            <div class="inner">
                Margin
            </div>
        </div>

        <div class="outer">
            <div class="shim"></div>
            <div class="inner">
                Margin+Shim
            </div>
        </div>

        <div class="outer2">
            <div class="inner2">
                Padding
            </div>
        </div>

    </body>

</html>


.外部{
背景色：红色；
宽度：100px；
高度：100px；
边缘底部：20px；
}
.内部{
背景色：白色；
保证金：5px；
}
.垫片{
高度：1px；
}
.outer2{
背景色：红色；
宽度：100px；
高度：100px；
边缘底部：20px；
填充物：5px；
}
.2{
背景色：白色；
}
边缘
余量+垫片
衬料

这是因为html标记上有默认的边距和填充。使用重置删除所有浏览器默认设置。（我强烈建议这样做）

这是因为html标记上有默认的边距和填充。使用重置删除所有浏览器默认设置。（我强烈建议您这样做）

您遇到了一个称为“边距塌陷”的常见问题。基本上，每当垂直边距接触时（即使一个元素位于另一个元素内），边距塌陷

在这种情况下，内部div上的margin属性正在塌陷为

margin bottom:20pxproperty。若要解决此问题，请在包含元素周围添加一点填充或边框
只需使用您的代码尝试此操作，即可正常工作：

有关折叠页边距的详细信息：
您遇到了一个常见的问题，称为“折叠边距”。基本上，只要垂直边距接触（即使一个元素位于另一个元素内），边距就会折叠
在这种情况下，内部div上的margin属性正在塌陷为margin bottom:20pxproperty。若要解决此问题，请在包含元素周围添加一点填充或边框
只需使用您的代码尝试此操作，即可正常工作：

有关折叠页边距的详细信息：
好的，我在发布问题几秒钟后，通过一个“相关”链接，在堆栈溢出上找到了答案。这个问题在一篇标题几乎相同的帖子中得到了回答，但我还是设法忽略了这一点。答案是在“outer”类中添加overflow:hidden，如下所示：。outer{背景颜色：红色；宽度：100px；高度：100px；边距底部：20px；overflow:hidden；}下次我将在发布之前进行更彻底的搜索。我相信locrizak给出的第一个答案。浏览器默认设置与此问题毫无关系。好的，我在发布问题几秒钟后通过一个“相关”链接在Stack Overflow上找到了答案。这个问题在一篇标题几乎相同的帖子中得到了回答，但我还是设法忽略了这一点。答案是在“outer”类中添加overflow:hidden，如下所示：。outer{背景颜色：红色；宽度：100px；高度：100px；边距底部：20px；overflow:hidden；}下次我将在发布之前进行更彻底的搜索。我相信locrizak给出的第一个答案。浏览器默认设置与此问题毫无关系。您必须在外部容器中添加1倍的填充物，它将神奇地开始工作。CSS是如此随意，我甚至不知道他们在他们的规范中指定了什么。你必须在外部容器中添加1px的填充，它将神奇地开始工作。CSS是如此随意，我甚至不确定他们在规范中指定了什么。