Padding inside an input without affect the width

Question

i'm getting problems with padding the content of the input. this is how i see an input without adding nothing:

i want to put a padding in the placeholder and the content value, when i try to add a:

input{
    padding-left: 10px;
}

this happends:

like you can see:

1. the textarea have the 100% of the width, but adding the padding to the inputs make them get over the max width.
2. when i have two inputs in a same row, they overlaps each other.

i tried changin the width of each one of the inputs with percentages to get something that looks good, but it becomes a problem when the screen's size change and becomes responsive.

so, i tried another solution; i change the padding and the resizing, for this:

::-webkit-input-placeholder { 
    padding-left: 10px;
}

:-moz-placeholder { /* Firefox 18- */
    color: grey; 
    padding-left: 10px;
}

::-moz-placeholder {  /* Firefox 19+ */
    padding-left: 10px; 
}

:-ms-input-placeholder {
    padding-left: 10px; 
}

but now, i have another problem, that solve partialy my problem, beacuse, this add a padding, but only to the placeholder not to the content value.

how can i solve my problem? any idea?

Answer 1

You can change the way the box model is calculated by using the box-sizing property.

http://www.paulirish.com/2012/box-sizing-border-box-ftw/

This way you add the padding to the inputs themselves and not the placeholder text. More consistant.