Since being introduced to the CSS property display: block by a dear online friend, I have used it to great effect in several layouts, mainly for navigational purposes.

How display:block Looks and Works

This is how I generally use this CSS style in my layouts, because I’m making only the links in my navigation display in a block format:

#nav a {display: block;}

Here’s an example of what display:block can do, from one of my domain’s previous layouts:

I love how clean it makes the navigation look; I actually like it so well that I’ve used display: block-style navigation on a lot of my websites. (I guess I’m a proponent of the saying “if it ain’t broke, don’t fix it.” :D)

A Few Padding and Margin Tricks with Display:Block

There are ways that you can space the links out or crunch them together to create any effect you desire, just using widths and heights specified in your CSS:

• For 10px of space all around each link: #nav a {display: block; padding: 10px;}
• For 10px of vertical space between links: #nav a {display: block; margin: 0px 10px 0px 10px;}
• For 10px of horizontal space between links: #nav a {display: block; padding: 0px 10px 0px 0px;}

(Note: when you do padding or margins with 4 numbers like I just did, the first number corresponds with the top part of the link block, the second number corresponds with the left side, and so on, clockwise around.) And this is just for demonstration; there are lots of ways you can innovate with padding and margins when it comes to using display: block! Try different pixel widths and heights, and see what works best for your site.

Using a Background Image with Display: Block

Secondly, I like that you can decorate the link “blocks” with background images, like a simple gradient or a pattern, especially for an a:hover link pseudoclass. Having a navigation link highlighted by a pretty pattern in the background when you hover over the link can be just the right touch of detail for a design. Doing something like this would involve your own version of the following code:

#nav a:hover {display:block; background-image: url(‘your_image_name.gif’);}

That code is basically just what I did for my main domain’s 11th layout, seen again here:

See the faint blue gradient over the first part of the word “domain?” That’s the background image hover–no Javascript needed!

Other Beautiful Things about Display: Block

Lastly, I like that you don’t need a “<br>” between each navigation link. It’s one less thing you have to type, which is always good for a web designer, since we’re usually typing large amounts of semi-intelligible code at a time. And it’s amazing how a missing <br> tag can quickly bungle up a layout! (Believe me, one little bit of unnecessary code can make quite a headache!)

In short, display:block can give you a CSS-only way to do something that looks as neat as a table without the clunky borders or endless <td> tags in your code. I love it!