Call: 847.544.0118

Email: ksj@twelve8.net

Categories

Pseudo padding-right with text-indent and direction

December 2, 2009

When I write CSS, I maintain a general habit of respecting box-model discrepancies, meaning I don’t apply border, padding, or margin to an element on an axis for which I’ve specified a fixed dimension. E.g., if I’ve specified height: 50px on a div, I won’t specify border-top or border-bottom on that div. I still like to hold on to this practice even when developing a site that doesn’t officially support IE6. Oftentimes, this means I have to get tricky, and one of my go-to hacks is to use text-indent to simulate padding-left when there aren’t multiple lines of text. (I also use line-height to simulate padding-top and -bottom.) So I can cover top, bottom, and left in most cases, but not right. Now I’ve hit upon a way to simulate padding-right (again, when I only need that padding on one line of text).

I can specify direction: rtl and text-indent: Xpx at the same time in order to give some breathing room to the right of an inline element.

Did you know…?

Mary Queen of Scots, Eli Whitney, and Jean Sibelius were all born on 12/8.

How do I get in touch?

Brighten my day with an email.

Or, if you know that you’re interested in working with twelve8, fill out this project idea sheet and send it to ksj{at}twelve8.net .

Or give me a call. It’s 847.544.0118

You can also download my vCard

© 2009 Kyle Jacobson. All rights reserved | Accessibility statement