Question

I have two div like:

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

then I give them style like:

    .outer{ background:yellow; position:absolute; width:80%; height:80px; margin:0 10%;}
    .inner{ background:red; position:absolute; margin:0 11px; width:100%; height:80px;}

I want the “inner” in “outer” ,as well the left and right have both 11px space,but it can’t be achieve,only the left have the 11px gap,the “inner” seems always have the same length as the father’s length

Then I think maybe setting the outer padding with 11px will be work.However ,it still doesn’t work……

Why this happened?So how can I solve this problem?Is that possible with the effect?

Here is the only case

Answer 1

The margins will add up to the width which is already stretched to the outer DIV by (width 100%) what you can do is the following – link:

.outer{ background:yellow; position:absolute; width:80%; height:80px; margin:0 10%; padding: 0 11px}
.inner{ background:red; height:80px;}