Block and Inline elements: Part two

In Block and Inline elements: Part one, I explained the difference between block and inline elements and how the default display for these elements is presented.

Within this part, I’ll explain how you can use CSS to alter the display of these elements to help with the presentation.

Block elements

As I explained in the previous part, block elements by default will fill 100% of the available width and will automatically force a new line.

However, in some circumstances it makes semantic sense to use a block element even though the appearance of this isn’t quite right and in these situations we can use CSS.

For example, menu items are a list of links and therefore we should use an unordered list to display them. For example:

<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>

Which is great but what if we want to display these in a horizontal navigation bar?

We need to alter the default display so that each list item can be displayed inline.

* { padding: 0; margin: 0; }
li { list-style-type: none; display: inline; }

This works great but what if you want to add a width or height to a list item?

* { padding: 0; margin: 0; }
li { list-style-type: none; display: inline; width: 150px; }

A width or height will not displayed on an inline element so the width on the above code will have no impact. However, there is a solution to this little problem using float’s.

li { list-style-type: none; float: left; width: 150px; }

By floating each list item to the left, it will give the appearance of an inline element and will also by default only take up as much space as is required in the same way as an inline element but will also allow you to style them as if they were block elements. Therefore width and height can be applied to float’s successfully irrespective of whether the element has a default display of block or inline which is the reason why float’s are used so much in web design.

The same principle can be applied to all block level elements and is a useful technique to be aware of.

Inline elements

Inline elements are slightly different as it is much rarer that you’ll need to alter an inline elements display but there are certain circumstances when you may need to do this and it’s perfectly acceptable to do so.

Sometimes I’ll find that I’ve had to use an inline element but need it to fill the whole width and to break onto a new line so changing the element’s display into block is the perfect solution.

The best example of this and the most common in my experience is when dealing with <a> the tag. When dealing with navigation, I may want style a link so that it appears more like a button but obviously a width cannot be applied directly to an inline element and therefore there’s no way of setting the width of the link to completely fill it’s container without changing it’s display.

Take the HTML code in the example above and apply a background colour to the link like so:

* { padding: 0; margin: 0; }
li { list-style-type: none; float: left; width: 150px;}
a { background-color: #CCC; }
a:hover { background-color: #000; }

This works well but only applies the effect to the text. Even if you were to apply a width to the , it won’t have any effect due to it being an inline element.

However, if we change the display value of the to display block, it will open up a whole new set of options.

* { padding: 0; margin: 0; }
li { list-style-type: none; float: left; width: 150px;}
a { background-color: #CCC; display: block; }
a:hover { background-color: #000; }

This will now force the element to completely fill it’s parent’s container which we’ve already specified as being 150px and will also allow much more flexibility when styling this element.

For example, you could now apply the following CSS to the HTML we first started out with and create all kinds of navigational menu’s that wouldn’t be achievable without changing the display value.

* { padding: 0; margin: 0; }
body { font-family: verdana, arial, helvetica, sans-serif; font-size: 75%; }
li { list-style-type: none; float: left; width: 150px; margin-right: 2px;}
a { background-color: #CCC; display: block; padding: 2px; text-align: center; color: #000; }
a:hover { background-color: #000; color: #FFF; }

There’s many possibilities and effects you can achieve by simply changing the display of an element and we’ve only really covered two of the most common uses here but the same principle applies to all elements so understanding the basics of the block and inline elements is essential in getting the most from your code.