CODEWITHSUNDEEP
htmlcss
Leo
Leo

Reputation: 4428

Why is the <a>-tag lying there at the bottom while it really surrounds the <img>?

It looks like the <a>-tag is visually lying at the bottom of the <img>-tag:

<a href="https://www.facebook.com/" target="_blank">
    <img src="https://www.facebook.com/favicon.ico"/>
</a>

a {
    background: #999;    
}
a:hover {
    background: yellow;
}
img {
    height: 32px;
    width: 32px;
    padding: 8px;
    border: 1px solid green;
}

There is a fiddle here: http://jsfiddle.net/lborgman/d2fc1jz5/

Note: Tested in Chrome only.

Upvotes: 1

Views: 56

Answers (4)

a86356
a86356

Reputation: 121

<a> is a inline-block;must make it block first.
a {
    background: red;
    display:block;
    width:32px;
}
a:hover {
    background: yellow;
}
img {
    height: 32px;
    width: 32px; `
}

Upvotes: 0

Kiran Varsani
Kiran Varsani

Reputation: 587

Change your CSS style like this. All I have changed is added display:inline-block to the 'a' selector and vertical-align:top to 'img' selector.

a {
    background: #999;
    display:inline-block;    
}
a:hover {
    background: yellow;
}
img {
    height: 32px;
    width: 32px;
    padding: 8px;
    border: 1px solid green;
    vertical-align:top;
}

Upvotes: 2

Mai
Mai

Reputation: 338

Try to change your a in css into this...

a {
    background: #999; 
    height: 50px; /* height + (padding*2) + (border*2) and also the width*/
    width: 50px;
    position:absolute;
}

Upvotes: 0

nweg
nweg

Reputation: 2865

Add display:inline-block to your a class like so:

a {
background: #999; 
display: inline-block;
}

Upvotes: 3

Related Questions