CSS property to pad text inside of div

Question

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

User · Answer

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

User · Answer

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

User · Answer

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   http   www paulirish com 2012 box-sizing-border-box-ftw

User · Answer

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    lt div id  container  gt       lt p id  text  gt Find Agents lt  p gt   lt  div gt    All you need to do is apply this CSS    text       padding  10px      Here is a fiddle showing the difference  http   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  http   jsfiddle net CHCVF 3

[html] CSS property to pad text inside of div

Examples related to html

Examples related to css