Question

小外部div中的一个大内部div，外部div溢出 - auto。但为什么没有内部div-right和外部div填充权？

HTML

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

CSS

.outer {
    width: 100px;
    height: 100px;
    padding: 50px;
    overflow: auto;
    background: #ccc;
}
.inner {
    width: 150px;
    height: 150px;
    margin: 50px;
    background: red;
}

fiddle

好的，问一个好问题并不容易。
（1）外部div的宽度和高度可以改变，最大可以是屏幕（2）内部div宽度和高度是固定的，但总是大于外部div （3）我只是希望内部div看起来像中心和一些像素来显示内部div盒阴影，但是没有内部div margin-right和外部div padding-right，所以我们看不到内部div右框阴影

<小时/> 我得到了它。

.inner {
    display: inline-block; /*this does work*/
    width: 150px;
    height: 150px;
    margin: 50px;
    background: red;
}

只需设置内部div display = inline-block 但谁可以告诉我原因？

Answer 1

您没有看到正确的边距，因为外部div小于内部的

检查http://jsfiddle.net/tNKhk/1/

我扩大了外部分区

.outer {
    width: 250px;
    height: 250px;
}

Answer 2

将您的CSS更改为

    .outer {
    width: 100px;
    height: 100px;
    padding: 50px;
    overflow: auto;
    background: #ccc;
}
.inner {
    width: 150px;
    height: 150px;
    margin: -25px;
    background: red;
}

为什么没有内部div margin-right和outer div padding-right？

2 个答案: