CODEWITHSUNDEEP
htmlcssimagehyperlink
mpen
mpen

Reputation: 282825

How do I get a link to properly contain an image?

fiddle

Screenshot

Source

<a href="#"><img width="200" height="200"></a>

Question

Notice how the black border only appears around the bottom part of the image? How do I fix that so that it appears around the whole thing?

I've done it before, but I can't remember how...

Upvotes: 1

Views: 113

Answers (5)

Niels
Niels

Reputation: 49919

Try this:

HTML

<a href="#">
    <img width="200" border="0" height="200" />
</a>

CSS

a {
    border:1px solid black;
    display: block;
    float: left;
}
img
{
   display: block;   
}

Live demo can be found here

It is probably better to edit the border of the <img> tag instead of the <a>

Upvotes: 2

Yzmir Ramirez
Yzmir Ramirez

Reputation: 1281

Put the border around the image like this: http://jsfiddle.net/nmhAs/

img {
    border:1px solid black;
}

Upvotes: 1

BjarkeCK
BjarkeCK

Reputation: 5729

In your CSS put

display:block;

or

display:inline-block;

on you a tag.

Upvotes: 1

Zoltan Toth
Zoltan Toth

Reputation: 47667

add a display: inline-block to your a

Upvotes: 1

David Thomas
David Thomas

Reputation: 253308

You can use either:

a {
    display: inline-block;
}

JS Fiddle demo.

Or,

a {
    display: block;
}

JS Fiddle demo.

Of the two, it's likely that inline-block is more appropriate to your need (and even Internet Explorer 6 and 7 should play nicely with it, since a is 'naturally display: inline').

Upvotes: 2

Related Questions