Padding within inputs breaks width 100%

Question

Ok, so we know that setting padding to an object causes its width to change even if it is set explicitly. While one can argue the logic behind this, it causes some problems with some elements.

For most cases, you just add a child element and add padding to that one instead of the one set to 100%, but for form inputs, that's not a possible step.

Take a look at this:

body {
  font-size: 14px;
  margin: 0px;
  padding: 0px;
}

DIV.formfield {
  clear: both;
  margin: 0px;
  padding: 10px;
}

DIV.formlabel {
  margin-top: 20px;
  padding: 5px;
  font-weight: bold;
  text-align: left;
}

DIV.formvalue {
  background-color: #eee;
  border: 1px solid red;
  padding: 10px;
  margin: 0px;
}

DIV.formvalue.correct {
  border: 1px solid green;
}

textarea.textarea {
  width: 100%;
  min-height: 80px;
}

input.input {
  width: 100%;
  padding: 5px;
}

input.input2 {
  width: 100%;
}

input.input3 {
  width: 100%;
  padding: 5px;
  margin: -5px;
}

input.input4 {
  width: 100%;
  padding: 10px;
  margin: -10px;
}

input.input5 {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}

<div class='formfield' id='field_text'>
  <div class='formlabel'>No padding</div>
  <div class='formvalue'>
    <textarea class='textarea' cols='80' rows='10' name='text'>No padding here</textarea>
  </div>
  <div class='formlabel'>Also no padding</div>
  <div class='formvalue'>
    <input type='text' class='input2' name='apa' value='Or here...' />
  </div>
  <div class='formlabel'>5px padding, which extends the parent element, d'oh!</div>
  <div class='formvalue'>
    <input type='text' class='input' name='apa' value='I dont want to extend outside the square!' />
  </div>
  <div class='formlabel'>5px padding and -5px margin, this does the trick, almost...</div>
  <div class='formvalue'>
    <input type='text' class='input3' name='apa' value='I dont want to extend outside the square!' />
  </div>

  <div class='formlabel'>10px padding and -10px margin, things are falling apart on the right side</div>
  <div class='formvalue'>
    <input type='text' class='input4' name='apa' value='I dont want to extend outside the square!' />
  </div>

  <div class='formlabel'><img src="/bilder/icons/badges/ok.png" width="16" height="16" border="0"> 10px padding and box-sizing: border-box</div>
  <div class='formvalue correct'>
    <input type='text' class='input5' name='apa' value='I dont want to extend outside the square!' />
  </div>
</div>

The second input has its padding set to 5px which I very much prefer to the default setting. But unfortunately that makes the input grow 10px in all directions, including adding 10px to the 100% width.

Problem here is that I can't add a child element inside the input so I can't fix it. So the question is:

Is there any way to add padding inside the input while still keeping the width 100%? It need to be 100% since the forms will render in different width parents so I don't know beforehand the width of the parent.

Solution 1

Using CSS3 you can use the property box-sizing to alter how the browser calculate the width of the input.

input.input {
    width: 100%;
    box-sizing: border-box;
}

You can read more about it here: http://css-tricks.com/box-sizing/

Solution 2

I don't know how cross browser compatible it is (it works in firefox and safari), but you could try this solution:

DIV.formvalue {
padding: 15px;
}
input.input {
margin: -5px;
}

(Only posted the values that I changed)

Solution 3

One option is to wrap the INPUT in a DIV which has the padding.

CSS:

div.formvalue {
    background-color: #eee;
    border: 1px solid red;
    padding: 10px;
    margin: 0px;
}

div.paddedInput {
    padding: 5px;
    border: 1px solid black;
    background-color: white;
}

div.paddedInput input {
    border: 0px;
    width: 100%;
}

HTML:

<div class="formvalue">
    <div class="paddedInput"><input type="text" value="Padded!" /></div>
</div>

Solution 4

The oft-forgotten calc can come to the rescue here:

input {
  width: calc(100% - 1em);
  padding: 0.5em;
}

Since we know the padding will add to the width of the element, we simply subtract the padding from the overall width. It's supported by all major browsers, is responsive, and doesn't require messy wrapper divs.

Solution 5

I've been having some issues with something similar to this. I have tds with inputs of 100% and a small padding. What I did was compensate for the padding on the td as follows:

.form td {
    padding-right:8px;
}

.form input, .form textarea {
    border: 1px solid black;
    padding:3px;
    width:100%;
}

padding of 8px to include the border and padding of the input/textarea. Hope this helps!

View more solutions

Comments

[michaelk]

Well, that doesn't suprise me much :) Don't think that there's an easy cross browser solution without changing the markup.

[Sandman]

Ok, I'm voting up this solution now since adding margin:-5px apparently isn't a violation. I've added a fourth input to the page that uses this and it seems to actually work. jigsaw.w3.org/css-validator/…

[Sandman]

That's the kind of hack I'm currently using for this problem, but I would rather use border on the input for "style reasons" or whatnot. But yes, this is how I am currently doing so it's a viable solution

[Seb Barre]

THIS technique works great for lining up the width of cells that contain padded inputs with cells that don't.. Just apply the padding-right selectively to any TD that contains a 100% width input.

[Felix Fung]

Padding a container div produces non-identical results to adding padding to an input field.

[eselk]

Add to what Felix Fung said -- You lose the ability to click with the mouse in the padding area and have it focus the input field -- among other more noticable issues. Just wanted to point out this lesser noticed/known issue -- It annoys me to no end when using web pages that use this hack.

[RajV]

If you know the padding and margin used in the input you can also do something like calc(100% - 12px) where in this example the margins and paddings add up to 12px.