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

Question

一个大的内部 div 在一个小的外部 div 中，并且外部 div 溢出自动。但是为什么没有内部 div margin-right 和外部 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，但是没有内div margin-right和外div padding-right，所以我们看不到内div right box-shadow

---

我刚刚明白了。

.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/

我把外面的div放大了

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