an ordinary blog — andr3.net

rss feed

my lifestream rss feed

are you tired of this? then return to latest posts

Pay attention to backgrounded text

(há uma versão portuguesa desta entrada.)

I'm sure you've all seen blocks of text which have a color or an image as a background.

Most of the times – not always – that i see this people often make a pretty common mistake slip-up. By not leaving a space between the border of the text block and the text itself, you create a feeling of choking. Check out these examples.

Which of these two examples seem more comfortable to you?
This text block or this text block?

This is an even better example since the outer background color is the same as the inner text color, the boundaries are sort of blended. This is more readable.

The code to create the adequate padding couldn't be simpler. I'll apply the rule to the class .highlight.

.highlight {
padding-left: 3px;
padding-right: 3px;
}


It can still be shorthanded to padding: 0 3px 0;, if the padding-bottom and the padding-top are zero. If they're not, adjust the values.

Comments

↑ top