How to make div width almost 100%

I have such a html code:

<div id="outer">
    <div id="inner"></div>
<开发者_如何学编程/div>

How can I make #inner div to have width 100% of #outer but minus 10px?

Here is my css:

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

---

Simply set a margin-left and/or a margin-right of 10px:

#inner {
    margin: 0 10px
}

For example: http://jsfiddle.net/xrmAE/1/

Change 10px to 5px if required.

---

NOTE

See ThirtyDot's answer, as it does not impact the outer element's width:

How to make div width almost 100%

The below will actually make the outer element's width total the width plus the padding left and right values, which is not what the question is asking. Sorry for the confusion. :)

---

You could add a padding left and right of 5px (assuming you want the #inner to be 10px less total, not per side):

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

EDIT

Taking into account the max-width property, see this demo:

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

---

What about padding: 10px for #outer?