CSS: How to make a span link to expand?

Tags: css,hyperlink

Problem :

I am trying to to make link inside a div button that when you mouseover in a div then it will detect the link because of the css property

display:block;width:100%;height:100%;

Using a div it works fine, but I am trying to use it as a span but the display gets misaligned. How can I make the display correct?

Here's the code:

<style>
.link-rounded-button {
    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border: 1px solid #828282;
    padding:0 0 0 3px;
    /* for test purposes, expand the width */
    width:200px;
}

.link-block {
    display:block;
    width:100%;
    height:100%;
}
</style>

<div class="link-rounded-button">
    <a class="link-block" href="#">this is a link inside a div</a>
</div>
<hr />
<!-- If I make the div to a span, the display is not correct. -->
<span class="link-rounded-button">
    <a class="link-block" href="#">this is a link inside a span</a>
</span>

Thanks in advance :)

Kind Regards, Mark

---

Solution :

Make the <span> a block level element as well. By doing display: block; on the <a> tag, you are making it a block level element. A <span> is a inline element. You cannot have a block level element inside a inline element. You must therefore make your <span> a block level element.

The following CSS will achieve this:

SPAN.link-rounded-button {
    display: block;
}

If you are using <span> in order to keep all the links on the same line, then use the following:

SPAN.link-rounded-button {
    display: inline-block;
}

WARNING: IE6 and below only supports inline-block on elements which are by default inline. It will not work on <div> for example, but it will work fine on a <span>.

---

Semantic Solution

You could also drop your extra <div> or <span> to make your code more semantic and still achieve the same effect (with the added benefit of having a CSS :hover effect which will work in IE6):

HTML:

<a class="link-rounded-button" href="#">this is a link with no extra markup</a>

CSS:

a.link-rounded-button {
    display: inline-block; 
    /* or display:block; depending of 
       the effect you are trying to achieve */

    -webkit-border-radius: 7px;
    -moz-border-radius: 7px;
    border: 1px solid #828282;
    padding:0 3px;
}

a.link-rounded-button:hover {
    background-color: #828282;
}

I've setup a demo of this solution.

Semantic Solution Demo

---

More Information

Here is a list of elements that are considered block level elements or accept block level elements as children.

XHTML 1.0 Block-level Elements