Question

How to use inputs with 100% width and margin/padding??

When the input has no focus the width is 2 pixel wider than the parent element, but on focus the width is right? How to solve this?! :-/

jsfidle

http://jsfiddle.net/eHQSR/1/

code

input, textarea {
    width:100%;
    -moz-box-sizing:border-box;
    -ms-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

input, textarea, button {
    display:inline-block;
    font-family:arial;
    margin:1px;
}

input, textarea {
    background-color:#FFFFFF;
    border:1px solid #297296;

    color:#333333;
    font-size:12px;
    padding:4px 4px;
}

input:focus, textarea:focus {
    border-color:#1a4c91;
    box-shadow:inset 0 1px 1px rgba(0, 0, 0, 0.07), 0 0 6px #7ab5d3;
    border-width:2px;
    margin:0px;
}

<div style="margin-top:20px; margin-left:20px">
    <div style="width:100px; background:red; float:left; margin:1px">
        <input type="text">
    </div>
    <div style="width:100px; background:red; float:left; margin:1px">
        <input type="text">
    </div>
</div>

Answer 1

It’s because of your margin on the inputs, spacing them from the parent element (it’s worse when not using border-box but still occurs because margin is not included in the width calculation).

input, textarea, button {
    display:inline-block;
    font-family:arial;
    margin:1px;
}

Instead, you can remove this inner margin and put 1px of padding on the parent: http://jsfiddle.net/eHQSR/3/

Update

As I said in the comment below, the extra border from the :focus styles was eating into your margin first which is why the height went unchanged. So I left the margin on there, removed the margin from the left, and then added the padding on just the left and right of the parent. So the width should be correct now and the height won’t "change" since it still eats into the margin above and below first (but as I noted, if you make the border any bigger it would still change the height of the input). All of this would be much simpler with a specified height somewhere.

http://jsfiddle.net/eHQSR/5/