Image inside anchor tag in Boostrap

Question

In Bootstrap, i experienced one thing about img inside anchor tag.

1) If you inspect the anchor tag it will have height greater than img. I found the answer because img has display block css.

2) Then also I dont know why it took max height than img? then if i put display block to both a tag and img tag then problem solved(both height equals).

Now coming back to point 1) suppose if I remove display block from img then anchor tag will have height equals to 16px why is that?

then if u remove browser styles like bootstrap font-size and default font-size and line height then the anchor tag height moves to 19px height. Why?

Answer 1

In the absence of any styles, the <a> is an inline element, and there's nothing in it that makes it grow larger than its standard height (the computed line-height of the font in effect), even if you put an <img> in there that's larger.
So, when the font-size is 16px and the line-height is 1.2, you have a 19 pixel high <a> .

However, if you change the display type of the the <img> to block , the <a> is no longer a simple inline element. With block content, it effectively becomes a block itself, and then it takes on the height of its content. (That's what block elements do.)

As to the sizes with Bootstrap in effect; yes, the Bootstrap css sets the font size to 14px, so the height will be 16px.