CODEWITHSUNDEEP
htmlcss
NealR
NealR

Reputation: 10669

CSS property to pad text inside of div

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

Upvotes: 53

Views: 243750

Answers (4)

Joel
Joel

Reputation: 5450

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/

Upvotes: 59

Dryden Long
Dryden Long

Reputation: 10182

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/

Upvotes: 43

Jarno
Jarno

Reputation: 653

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.

Upvotes: 6

GDSeabra
GDSeabra

Reputation: 41

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.

Upvotes: 1

Related Questions