CODEWITHSUNDEEP
javascripthtmlcssalignmentspace
Anish
Anish

Reputation: 2917

a tag taking some extra space in html

I put an image inside the a tag. but when i gave border to the image and a tag. The A tag taking some extra space. it is not surrounding the image.how to overcome those extra space by 'a' tag. i am indicating a tag in red line.

My html:

<a href="#"><img src="http://img165.imageshack.us/img165/1043/burnhr6.png"/></a>

Css:

img
{
    border:1px solid black;
}
a
{
    border:1px solid red;
}

http://jsfiddle.net/rEPXY/2/

Upvotes: 11

Views: 6560

Answers (5)

Matt Lo
Matt Lo

Reputation: 5731

Live Example: http://jsfiddle.net/rEPXY/18/

Image is treated as inline, so its going to adhere to font-size and line heights, along with line breaks. Change the nature of the image and its container and you should be good. The CSS below for the <a> tag is using inline-block but you may also change it to block with a width property

If you float the <a> tag too, its going to become troublesome align it with other elements.

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

Upvotes: 2

Mike Lentini
Mike Lentini

Reputation: 1358

Depending on how this image is going to be positioned on you website, you can fix this by floating the <a> and <img> tags. See revised jsfiddle for an example:

Html:

<a href="#"><img src="http://img165.imageshack.us/img165/1043/burnhr6.png"/></a>

Css:

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

a {
    border:1px solid red;
    float: left;
}

www.jsfiddle.net/rEPXY/9

Upvotes: 3

Rob Hruska
Rob Hruska

Reputation: 120286

According to this, you can solve it by adding the following rule:

a img {vertical-align:bottom}

That seemed to work for me in your jsfiddle.

Upvotes: 2

Baz1nga
Baz1nga

Reputation: 15579

What I dont understand is why you have a border on the a tag. I am guessing when you do add the border the a tag is interpreted by the browser as an element with content in it and thus it probably allocates the default line-height and adjusts the width to fit the content inside the tag.

Upvotes: 1

ToddBFisher
ToddBFisher

Reputation: 11590

Is something like this what you are looking for?

a
{
    border:1px solid red; display:inline-block; line-height:0;
}

Upvotes: 12

Related Questions