How do you prevent expanding outer element when adding padding?

Question

I'm not a designer. When writing CSS it often happens that I need to add some padding to an element. How do you avoid that padding to propagate to the parent element ?

HTML:

<div id="outer">
  <input id="login">
</div>

CSS:

#outer {
  width: 300px;
}

#login {
  width: 100%;
  padding: 1em;
}

If you use that HTML+CSS, you'll see that the #outer element is bigger than 300px. The easiest solution if to re-write the #login's width to "300px - to_pixel(1em)". It works well but also means that now the font size needs to be fixed. Is there another way where I don't need to convert everything in pixels ?

what have font size to do with padding? dont get it... anyway, width of element = width + padding + border + margin according to css box model http://www.w3schools.com/css/css_boxmodel.asp — Gatekeeper, Nov 28 '11 at 10:09
It's such a shame that support for CSS3 `calc()` is [so poor](http://caniuse.com/#search=calc). It would make this a breeze. — Andy E, Nov 28 '11 at 10:10

score 30 · Accepted Answer · edited Nov 28 '11 at 10:30

30

What you want is the box-sizing property. Take a look at this jsFiddle for it in practice. Just add this:

-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;

to your #login CSS. This is supported in most modern browsers, including IE8+.

edited Nov 28 '11 at 10:30

thirtydot

224,678
48
389
349

answered Nov 28 '11 at 10:10

CherryFlavourPez

7,529
5
45
47

I have no words for how awesome this neat tidbit is for me - thank you! (clearly there are a lot of clever people out there as I'm astounded you haven't been upvoted to like a thousand :)) – Pancho Apr 25 '16 at 15:21

score 4 · Answer 2 · edited Oct 16 '15 at 11:34

4

You can css box-sizing property like this:

#outer {
  width: 300px;
    background:red;
    height:100px;
}

#login {
  width: 100%;
  padding: 1em;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

http://jsfiddle.net/TQXdn/

box-sizing does not work in IE7

edited Oct 16 '15 at 11:34

moffeltje

4,521
4
33
57

answered Nov 28 '11 at 10:09

sandeep

91,313
23
137
155

score 1 · Answer 3 · edited Mar 15 '13 at 18:03

Yes you have to fix this or adjust according to width + padding . The Actual Size when you are using padding will be

actual size = Defined Width + Padding Width + Border Width

then if you want to limit it to the container size then take care about the CSS box model

#outer {
  width: 300px;
    border:1px solid red;
    padding:1em;
}

#login {
  width: 100%;
}

It will put the input in center of the container.. Use Box Model as suggested in question comments also.

score -2 · Answer 4 · answered Apr 05 '15 at 07:53

-2

There is my solution:

width : calc( 100% - 10px );
padding: 5px;

answered Apr 05 '15 at 07:53

yudo

11

tarmes · Answer 5 · 2011-11-28T11:01:58.023

-4

#outer {
  width: 300px;
  background:red;
  height:100px;
  position: relative;
}

#login {
  position: absolute;
  left: 1em;
  right: 1em;
  top: 1em;
  bottom: 1em;
}

See it here:

http://jsfiddle.net/22ABj/

edited Nov 28 '11 at 11:01

answered Nov 28 '11 at 10:03

tarmes

15,366
10
53
87

Odd, mine's the best and most portable answer. It doesn't require box-sizing, and yet no votes :( – tarmes Nov 28 '11 at 11:03
3

You're relying on `absolute` positioning, which means that: a) you need to specify a height for the container and b) the input itself has no padding (rather the container has the _illusion_ of padding), which is presumably not the desired visual effect. If IE7 support is essential, some variation on @Niranjan's answer is the most practical. – CherryFlavourPez Nov 28 '11 at 11:18

How do you prevent expanding outer element when adding padding?

5 Answers5

http://jsfiddle.net/TQXdn/