Question

I have read (actually here on SO, but cannot find the post at the moment) about a way to hide elements with negative margins.

I recall, that the answer contained a deep explanation on why to do this, and the benefits over other methods (visibility: hidden; position: absolute;, display: none). And yes, the method provided a way to remove the element out of the document flow (possibly hackish, not valid).

Have I been dreaming about this or there is such a way? If there is, then yes, I would love the little in-depth explanation.

Thanks in advance!

Answer 1

Are you trying to hide block level elements like a div, or just the text on a link that’s got a background image, for instance. If it’s the second item, the CSS you’re looking for is text-indent. I’ve used it in the past like this:

a.button {
  /* .button is a for instance class name */
  text-indent: -9999px
}

This will leave the block level element (the a tag) and any background you’ve placed on it, in the document flow, but will move the text off screen. This is a technique I’ve used in the past, but be careful of the text you’re hiding–the search engines look at this as a quasi-black hat technique. Just make sure the hidden text doesn’t look like keyword stuffing or obvious spam terms and you’ll be fine.

Hope this helps.