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

Question

一个大的内部 div 在一个小的外部 div 中，外部 div 溢出-自动。 但是为什么没有inner div margin-right 和outer div padding-right？

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 box-shadow，但是没有inner div margin-right和outer div padding-right，所以我们看不到inner div right box-shadow

---

我只是明白了。

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

只需设置inner div display = inline-block。
谁能告诉我为什么？

Answer 1

您看不到右边距，因为外部 div 比内部 div 小

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

我扩大了外部的div

.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;
}