The absolute position element's margin have no effect if it is in another absolute position element?

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

---

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

---

Removing position: absolute; (or changing it to relative) and width: 100%; from .inner will give you exactly what you want. Then, if you really need an element with position: absolute; inside, put it in .inner.

An example