Question

This is something that annoys me very often.
If you create a <div> and style the border (for example, border-radius: 3px;) the text is almost on top of the border, which looks very bad.
The only solution I could come up with was wrapping the contents of that div in another div, and move the wrapping div ±3px to the right.
This creates a lot extra mark-up, and it somehow doesn’t feel right, as if there is a bettr solution.

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

Of course I’d like a cross-browser solution, but I don’t mind 1 css rule per browser, I can throw that somewhere at the bottom of my stylesheet and never look at it again, that won’t complicate the markup.

Answer 1

padding-left:3px;

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

Read more about padding: http://www.w3schools.com/css/css_padding.asp