Question

为什么外部div的填充会在下面的示例中折叠到内部div的边缘？

<!DOCTYPE html>
<html>
    <head>
        <title>Col Padding</title>
        <link rel='stylesheet' type='text/css' media='all' href='http://meyerweb.com/eric/tools/css/reset/reset.css' />
        <style type='text/css'>
            .padding
            {
                padding: 50px;
                background-color: green;
                zoom: 1;
                width: 500px;
            }
            .margin
            {
                margin: 100px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <div class='padding'><div class='margin'>Content</div></div>
    </body>
</html>

这是在IE 7.0.5730.13中
这是在FF 6.0.2中

@David - idk我只有IE7
@Faust - 我现在附上截图。我用XRAY检查了它们，看它们是不同的 @veritas - 改变DOCTYPES似乎没有改变任何东西。我检查过，IE7正在标准模式下渲染。

Answer 1

尝试添加float:left。

不是最佳选择，但有时可行。

Answer 2

.padding
        {
            padding: 50px;
            background-color: green;
            zoom: 1;
            width: 500px;
            overflow:hidden; /* blocks margin collapse */
        }

编辑：需要解决方法

    <style type="text/css">
        .padding
        {
            background-color: green;
            width: 500px;
        }
        .p
        {
            padding:10px;
        }
        .margin
        {
            margin: 10px;
            background-color: blue;
        }
    </style>

    <div class="padding">
    <div class="p">
        <div class="margin">Content</div>
    </div>
</div>

顺便说一下，不是那么好......我不认为有更好的东西，我已经尝试了很多黑客

：（

Answer 3

以下作品但我不喜欢它。我不喜欢在.margin中手动设置行高，我不喜欢放入＆amp; nbsp;

<!DOCTYPE html>
<html>
    <head>
        <title>Col Padding</title>
        <link rel='stylesheet' type='text/css' media='all' href='http://meyerweb.com/eric/tools/css/reset/reset.css' />
        <style type='text/css'>
            .padding
            {
                padding: 50px;
                background-color: green;
                width: 500px;
                line-height: 0px;
            }
            .margin
            {
                margin: 100px;
                background-color: blue;
                line-height: 16px;
            }
        </style>
    </head>
    <body>
        <div class='padding'>&nbsp;<div class='margin'>Content</div></div>
    </body>
</html>

任何人都可以改进或提供更好的解决方案吗？

Answer 4

我用Google搜索了这个问题并没有发现任何内容。因为当您需要同时使用父级填充和子级边距时，这种情况很少发生。但是如果你不可避免的话，可能最好将150px padding-top专门应用于IE6,7的父元素？在我看来，它比插入空格更好，将line-height应用于0，而不是将此属性重新定义为所有内部元素。

.padding
        {
            padding: 50px;
            background-color: green;
            width: 500px;
        }
*html .padding
        {
            padding: 150px;
        }
.margin
        {
            margin: 100px;
            background-color: blue;
        }

Answer 5

试试这个

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <html>
            <head>
                <title>Col Padding</title>
                <link rel='stylesheet' type='text/css' href='http://meyerweb.com/eric/tools/css/reset/reset.css' />
                <style type='text/css'>
                    body{
                        font-size:1em;
                    }
                    .padding
                    {
                        padding: 150px;
                        background-color: green;
                        width: 500px;
                        line-height: 0px;
                    }
                    .padding span
                    {
                        background-color: blue;
                        padding:15px 5px;
                        display:block;
                        color:#fff;
                    }
                </style>
            </head>
            <body>
                <div class='padding'><span>Content</span></div>
            </body>
        </html>

IE7保证金折叠成填充

5 个答案: