17

How can I add padding to an element without adding on top of the predefined width?

It's good to define the width of a column to make a clean grid for the layout; but also wants to add padding to the contents inside the column. Any way to specify that?

tshepang
  • 12,111
  • 21
  • 91
  • 136
user2119834
  • 181
  • 1
  • 1
  • 6

4 Answers4

28
element { 
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
    -moz-box-sizing: border-box;    /* Firefox, other Gecko */
    box-sizing: border-box;         /* Opera/IE 8+ */
}
Linus Caldwell
  • 10,908
  • 12
  • 46
  • 58
11

Use box-sizing, it makes padding inclusive: https://developer.mozilla.org/en-US/docs/CSS/box-sizing

Example:

div {
    box-sizing:border-box;
    -moz-box-sizing:border-box; /* Firefox */
    -webkit-box-sizing:border-box; /* Safari */
}

It's worth noting that this won't work on IE7.

For IE8, please see the top answer to this Q: box-sizing: border-box => for IE8?

Community
  • 1
  • 1
Kyuuji
  • 744
  • 5
  • 12
  • 1
    w3schools is a terrible resource. Use MDN. – John Dvorak Mar 13 '13 at 10:55
  • @JanDvorak Well, apologies but I was unaware. Edited with MDN. Sad to see an answer get upped purely on the choice of link though, as opposed to the content itself. – Kyuuji Mar 13 '13 at 10:58
  • 1
    For people browsing and reading, I looked around for w3schools information and found: http://w3fools.com - highly recommend reading it as it explains Jan Dvorak's statement. – Kyuuji Mar 13 '13 at 11:06
  • 1
    see http://w3fools.com . Some of w3schools' fails have been corrected, but lots of them are still present, and new fails surely keep appearing. – John Dvorak Mar 13 '13 at 11:08
  • 1
    the references used are a part of the answer, and it's surely fine to rate them. Not many resources have such a bad reputation, but w3schools (are about the only ones that) do. – John Dvorak Mar 13 '13 at 11:13
  • 1
    I'd disagree depending on how it's used to be honest. In this case it was used, there were no errors on the page I was linking to and I'd posted the code and answer inside the answer, with the link only serving a purpose for further information. See here: http://meta.stackexchange.com/questions/87678/discouraging-w3schools-as-a-resource – Kyuuji Mar 14 '13 at 17:33
3

Everytime you add padding to block element, the width of this element changes. This problem has many solutions. I usually set margin to first child element and set width: 100% for this element.

For example, we have:

<div id="main">
    <div id="child">
        This is content with margin
    </div>
</div>

CSS style for these elements:

#main {
    border: solid 1px red;
    float: left;
    width: 5em;
}

#child {
    border: solid 1px blue;
    float: left;
    width: 100%;
    margin: 0.5em;
}

This is a solution for any browser

Tushar
  • 85,780
  • 21
  • 159
  • 179
AlexN
  • 49
  • 2
  • this is indeed the solution the W3C team had in mind when designing the layout model. Indeed, I have never used the box-sizing property. – John Dvorak Mar 13 '13 at 11:31
0

It's an old thread, I know. But last time I had a complete black hole about making a DIV with a NOT set width and with paddings, so it will not blow up my 3-columns row and with CSS2. So I put one DIV with float left, on with right and between them a DIV with no float and no fixed width, but I wanted to have padding in it. How about that...

I gived up. :D But I put an inner DIV in the center one and give it width=90%. So far so good, a very simple and not great solution, but sometimes it helps to achieve the look you need. ;]

b.r.

siudek
  • 31
  • 2