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

Question

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...

Wow...5 answers within 5 seconds of each other. Fiddle is an awesome little tool. The anchor tag height looks like its based on the text height. — Yzmir Ramirez, Nov 12 '11 at 23:58

score 2 · Answer 1 · answered Nov 12 '11 at 23:55

2

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').

answered Nov 12 '11 at 23:55

David Thomas

249,100
51
377
410

neither of those render correctly in FF. inline block shows as a dot, and block shows as a line a black line. in IE inline-block works, but it leaves a gap between the image and bottom border, wheras the block leaves a gap and fills the full width (which I guess isn't too bad because I could explicitly set the width). – mpen Nov 23 '11 at 07:54

score 2 · Accepted Answer · edited Nov 13 '11 at 10:01

2

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>

edited Nov 13 '11 at 10:01

codingbadger

42,678
13
95
110

answered Nov 12 '11 at 23:55

Niels

48,601
4
62
81

floating it is the only method that got rid of the spacing at the bottom of the image too. – mpen Nov 13 '11 at 01:00
@Niels: Rather than just posting a link can you post the actual code required to solve the problem and provide the link for reference. If the link were to break your answer would have become useless. Thanks – codingbadger Nov 13 '11 at 10:01
Yeah I'll do that in the future. I'm new to stackoverflow, so will keep that in mind. – Niels Nov 13 '11 at 12:39
1

@Mark I found that floating didn't remove the extra space, but adding line-height: 0; to the A element did, as explained [here](http://stackoverflow.com/questions/3532870/extra-padding-on-linked-images-in-every-broswer). – ria Nov 20 '11 at 13:17

score 1 · Answer 3 · answered Nov 12 '11 at 23:55

1

add a display: inline-block to your a

answered Nov 12 '11 at 23:55

Zoltan Toth

46,981
12
120
134

score 1 · Answer 4 · answered Nov 12 '11 at 23:56

1

In your CSS put

display:block;

or

display:inline-block;

on you a tag.

answered Nov 12 '11 at 23:56

BjarkeCK

5,694
5
41
59

score 1 · Answer 5 · answered Nov 12 '11 at 23:56

1

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

img {
    border:1px solid black;
}

answered Nov 12 '11 at 23:56

Yzmir Ramirez

1,281
7
11

issue isn't just the border. i wanted to learn how to contain the element properly. – mpen Nov 13 '11 at 00:59

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

fiddle

Screenshot

Source

Question

5 Answers5