How to give an anchor tag a width and height

I’ve seen this happen a few times by junior web designers. They create a bunch of anchor tags and using CSS they give it a background color, width and height. Then they go refresh their web browser and voila. Only the background color shows.

The width and height doesn’t seem to take. What they were wanting to get is to look something like this:

Here’s an example with code of what I am talking about:

HTML Code

CSS Code

Result

So why does this happen? This happens because anchor tags are not block level HTML elements but rather inline elements. So what is the difference between the two? Here is the definition of the two items:

Inline Element definition:

Inline elements typically may only contain text and other inline elements. When rendered visually, inline elements do not usually begin on a new line. I found a good link that lists all of HTML inline elements.

Block Element:

Block-level elements typically contain inline elements and other block-level elements. When rendered visually, block-level elements usually begin on a new line. I found a good link that lists all of the HTML Block Elements.

So how would we get the anchor tags to show their widths and heights? Well we only would have to add one line of CSS code in the /* Buttons */ section. This is what the CSS would look like after we were done with it.

CSS Code

After you have done this the buttons would now show their height and width. They would also be stacked on top of each other since the definition of a block element is to begin on a new line. If you didn’t want the buttons to be on new lines you could always float them to the left and put a padding on them.