48

Is there a way to give a div element some padding INSIDE its border? For example, currently all the text inside my main div element goes right to the edge of the element's border. I'd like, as a general rule on this site, to have at least 10 to 20 px of space between the text and the border.

Here's a screen shot to illustrate what I currently have:

enter image description here

1
  • 3
    add the padding to the elements inside of the div Dec 10, 2013 at 20:56

4 Answers 4

55

The CSS property you are looking for is padding. The problem with padding is that it adds to the width of the original element, so if you have a div with a width of 300px, and add 10px of padding to it, the width will now be 320px (10px on the left and 10px on the right).

To prevent this you can add box-sizing: border-box; to the div, this makes it maintain the designated width, even if you add padding. So your CSS would look like this:

div {
    box-sizing: border-box;
    padding: 10px;
}

you can read more about box-sizing and it's overall browser support here:

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

43

I see a lot of answers here that have you subtracting from the width of the div and/or using box-sizing, but all you need to do is apply the padding the child elements of the div in question. So, for example, if you have some markup like this:

<div id="container">
    <p id="text">Find Agents</p>
</div>

All you need to do is apply this CSS:

#text {
    padding: 10px;
}

Here is a fiddle showing the difference: https://jsfiddle.net/CHCVF/2/

Or, better yet, if you have multiple elements and don't feel like giving them all the same class, you can do something like this:

.container * {
    padding: 5px 10px;
}

Which will select all of the child elements and assign them the padding you want. Here is a fiddle of that in action: https://jsfiddle.net/CHCVF/3/

4
  • This is what I did - created a div called contentContainer and gave that a padding of 20px. thx
    – NealR
    Dec 10, 2013 at 22:00
  • 1
    @NealR No problem, glad you figured it out Dec 10, 2013 at 22:00
  • .container * does not work if you have multiple containers within it. All the inner containers will also get the padding which might be undesirable.
    – Arnab
    Feb 5, 2017 at 15:00
  • 1
    This gonna apply padding for everything...this is a not good answer... Need to use box-sizing: border-box; with padding to apply padding for particular div. Feb 20, 2020 at 19:05
6

Just use div { padding: 20px; } and substract 40px from your original div width.

Like Philip Wills pointed out, you can also use box-sizing instead of substracting 40px:

div {
    padding: 20px;
    -moz-box-sizing: border-box; 
    box-sizing: border-box;
}

The -moz-box-sizing is for Firefox.

3
  • Can you add a jsFiddle too?
    – frenchie
    Dec 10, 2013 at 20:58
  • 1
    or add box-sizing: border-box... (instead of subtracting 40)
    – philwills
    Dec 10, 2013 at 21:00
  • Only problem w/this solution is that it blows up my nav bar. Had to create a separate div container around the main div and simply give that a padding of 20px. thanks though, didn't know about border-box.
    – NealR
    Dec 10, 2013 at 22:01
1

Padding is a way to add kind of a margin inside the Div.
Just Use

div { padding-left: 20px; }

And to mantain the size, you would have to -20px from the original width of the Div.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.