Why there is no inner div margin-right and outer div padding-right?

1
votes

A big inner div in a small outer div, and the outer div overflow-auto. but why there is no inner div margin-right and 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

OK,it is not easy to ask a good question.
(1)the outer div width and height are changeable,as max as screen.
(2)the inner div width and height are fixed,but always bigger than outer div
(3)I just want the inner div looks like center and some pixels to show inner div box-shadow,but there is no inner div margin-right and outer div padding-right, so we cannot see the inner div right box-shadow

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

Just set inner div display = inline-block.
But who can tell me why?

2
csscentermarginpadding
Where did you set margin and padding? – Gibbs
because probably the is no need for padding/margin in the inner div... depends of how your extra code is like – florin.prisecariu
@florin.prisecariu As what I mentioned,I just need some pixels to show inner div box-shadow,then the inner div could looks like center – threetree

2 Answers

0
votes

you do not see the right margins because the outer div is smaller then the inner one

check http://jsfiddle.net/tNKhk/1/

i enlarged the outer div

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

Change your css to 

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