Pro Socialgo > For web community software

Our last podcast looked at placing our logo in the header and creating a rollover effect. If you recall we had  to change the "header h1 a" into a block element. I said I would write a blog on block elements, and true to my word 67% of the time,  here we go. 

Play with Display
If your new to CSS, you've probably stayed away from the "Display" property. Well you might be missing out on a powerful tool. It only has to values, or three things it can do, so it's easy to remember . 

1. display: inline;
2. display: block;
3. displa; none; 

All three of these values are extremely useful. Think of the display:none that we used in last weeks tip on hiding elements on a page, like the birthday element that so many ladies hate... display:none; You can even hide sorts of stuff you don't want on your page and is not yet an option in the layout manager.

Block and Inline are just as powerful. Lets say you want the background color of a DIV with a ad or image in it to automatically span the width of your text, so as not to worry about setting an exact pixel width. You would use the INLINE value to do this, because a DIV is a block element.

The difference between Block and Inline These are the most common elements that are blocks, and it's pretty easy to see this because they are usually designed visually as blocks.

<div>
<p>&nbsp;</p>
<ul>
<li> <form>
<h1>

A Block element starts on it's own line. Think of everything on your web page like the flowing of text a paragraph. Block elements are when you hit the enter key and go to a new line. So if you have say a Block element like a H1 under a inline element (think text) your block element will drop down like you hit the enter key.

Here are some inline elements:

<span> 
<strong> 
<a> 
<img> 
<em>

The main difference between a block and a inline is hight and width, or those are at-least the most effective differences. A inline element's height and width, line hight, and top and bottom margins CAN NOT be changed. It will also span the width always of the image or text and can't be changed. It also begins on the same line.. so no enter key.

Useful Block

Blocks are very useful for image replacement. Like we put a image inside of a inline element the "a" element. If you don't turn that "a" element into a block, there is no adjusting it's hight or width, so more than likely, you will not see your full image. So simply put display: block; as a property, and your set, now you can fit the "a" around your image, and it will be linkable. I use this allot in SocialGo Design.

Useful Inline A good way to use the inline value is in setting a Block element, say a DIV, to be inline, giving it a background color, and allowing it to span the width of that inline element. See, a Inline element will just go and go until something stops it, so you can allow that background color to go the width of the text and you don't even have to specify a width. So that's about it. Inline is kind of useful, you will find places for it as you get deeper in CSS, but Block is very useful, and a must in many situations.