Css - move text to the right

Question

This is what annoys me very much. If you create a <div> and style the border (e.g. border-radius: 3px; ), the text is almost over the border, which looks very bad.
The only solution I could come up with was to wrap the contents of this div in another div and move the wrapper div ± 3px to the right. This creates a lot of extra allowance, and it somehow doesn't seem right, as if there is a bettr solution.

So here is my question:
Is it possible to move the contents of a div of three pixels to the right, as described above, only with css?

Of course, I would like to use a cross-browser solution, but I am not against 1 CSS rule for each browser, I can drop it somewhere at the bottom of my stylesheet and never look at it again, which will not complicate the markup.

Answer 1

 padding-left:3px; 

Add this to your div that has the text in it.

More on the add-on: http://www.w3schools.com/css/css_padding.asp

Answer 2

Easy, you can use padding: 0 3px; (horizontal padding-left: 3px; only), padding-left: 3px; ..

http://jsfiddle.net/Kyle_Sevenoaks/D3BSL/4/

Answer 3

Hope you look like this: - http://tinkerbin.com/q4cVJ0FF

HTML

 <div>stack</div> 

CSS

 div { background:red; border-radius:3px; padding-left:3px; } 

you can easily get the desired padding result, and you can adjust the indentation on all four sides left,right,top,bottom ...