如何使div宽度接近100％

Question

我有这样的HTML代码：

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

如何让#inner div的宽度为#outer的100％而减去10px？

这是我的css：

#outer {
    width: 100%;
    max-width: 500px;
}

Answer 1

只需设置margin-left和/或margin-right 10px：

#inner {
    margin: 0 10px
}

例如：http://jsfiddle.net/xrmAE/1/

如果需要，请将10px更改为5px。

Answer 2

padding: 10px的{​​{1}}呢？

Answer 3

注意

请参阅ThirtyDot的答案，因为它不会影响外部元素的宽度：

How to make div width almost 100%

下面将实际上使外部元素的宽度总和宽度加上填充左右值，这不是问题所在。对困惑感到抱歉。 :)

---

您可以在5px左右添加填充（假设您希望#inner总数减少10px，而不是每边：

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

#outer {
  width: 500px;
  height: 500px;
  background: red;
  padding: 2px 5px;
}
#inner {
  width: 100%;
  height: 500px;
  background: blue;
}

http://jsfiddle.net/ZtaCM/

修改

考虑到max-width属性，请参阅此演示：

<div id="test">
    <div id="outer">
        <div id="inner"></div>
    </div>
</div>
<p>
    <input type="button" onclick="changeWidth('400px')" value="Change to 400px"/>
    <input type="button" onclick="changeWidth('500px')" value="Change to 500px"/>
    <input type="button" onclick="changeWidth('600px')" value="Change to 600px"/>
</p>

#outer {
  width: 100%;
  max-width: 500px;
  background: red;
  padding: 2px 5px;
}
#inner {
  width: 100%;
  height: 200px;
  background: blue;
}
#test {
  background: yellow;
  width: 600px;
}

function changeWidth(width) {
    document.getElementById('test').style.width = width;
}

http://jsfiddle.net/ZtaCM/1/