Hi,
When studying the basics of HTML and CSS I have to admit it is kind of addicting wanting to know everything. So I’m actively trying my best to find the answer on my own but a lot of times I really need your help.
After a lot of minutes (almost 30 minutes) trying to find out what I did wrong, I only found out the solution to the problem.
When I made this image into a clickable link (image link) I saw that there was extra space at the bottom. Adding an anchor link to the image causes extra space at the bottom of the image. I thought it was a problem with the margin of the image or a padding problem of the container.
But no. It was the anchor link that was causing the problem. I found out that adding “display:block;” to the image was doing the trick.
My question is: Why does adding an anchor link to an image cause extra space. And what does “display:block;” do to remove that extra space?
Hi again, and thanks for another great question!
Before I go on with the response, I want to appreciate the great work that you’re doing. These questions not only help you, but they also help a lot of us here. Everything about this is right; First of all, you’re curious and want to learn, then you do your research, and then you ask great questions. That’s an excellent thing to do. I hope you never stop doing what you’re doing now.
Okay, now here’s what I know about the situation that might help:
By default, img is an inline-block. So when you add an image, it’s aligned on the baseline of the text. What it means is, in inline elements, there’s extra space reserved for descenders of a text, like if there was a text instead of an image, you would see two parts. One part is the letters that sit on the line, that is the baseline. And the other part is the letters that descend or just dip below the line, and those are the descenders. This text, for example: This is an example for you. In this text, you can see that the letters p and y are descenders because they are not sitting on the line; they are dipping below it. Just like that, when you add an image, the image is an inline element that sits on the baseline. Which leaves the descenders part empty. That’s why you see that small gap. When you add display:block;, that removes the inline property and deals with it like a block.
I hope I explained it clearly.
Good luck!
2 Likes
Nice explanation!I learned a lot! 
1 Like
What did I do to confirm the conclusions?
- I wrote a simple text that has default display of inline
- I took an example of W3Schools of inline-block elements to see their behavior.
- I placed an image link between the text
Conclusions
-
Anchor element is by default an inline element
-
Image behaves also like inline element
-
It is true that because of the descenders, there is extra space at the bottom of the image link
-
Applying the same height to image and container does not remove the extra clickable space at the bottom of the image. The image does fit in the container precisely, but it hides the extra clickable space below the border of the container.
Block level elements take up as much space as possible by default . In this case setting display to block of the image removes the inline property of the anchor element so that the image can take up as much space as possible by default. Each block level element will start a new line on the page, stacking down the page. In addition to stacking vertically, block level elements will also take up as much horizontal space as possible.
I think I do understand why an image can also be seen as an inline-block.
- INLINE: Because it’s aligned on the baseline of the text.
- BLOCK: Image does have a default width and height (or you can assign width and height)
Question
Now I know that an image can also be seen as an inline-block element.
- I don’t understand why the other 2 yellow inline-block elements are getting below the baseline/descenders and the image not?
Adding height to the yellow inline-block elements expands the height downwards while adding height to the image expands the height upwards.
Tell me more about it.
And correct me if anything in my documentation is wrong or not well written.
Thank you in advance!
I found out that working this way helps me so much more than doing a bunch of tutorials, hoping to “understand” it. Literally I feel my brain is working and learning so much faster (even though it feels like it takes forever).
I’ll never stop, because I really notice the benefits! 
Thank you
1 Like
Great progress. So we far, we know why image behaves the way it does. The question is, why doesn’t the span when set to inline-block behave the same way as image?
The reason is that img is a replaced element and span isn’t. What’s a replaced element. It’s an element whose content cannot be styled by css, because the browser replaces it with something external. You can’t style the pixels of an image can you? And they are treated as a black box. The browser replaces the img element with a box containing external content. And they don’t contain text. Their content is external. Examples are the video element, input element and etc alongside img. You can give it width and height but because it’s aligned to the baseline, it will grow upwards.
Now why doesn’t the same happen with the span elements. First becuase they are not replaced elements. And second, because span elements have text. Now if you remove the text and have an empty span with display:inline-block;, you will see that it behaves just like the img, growing upwards. So adding the text makes it grow downwards and why is that? Because when you add the text, the browser aligns that text to the baseline. It moves downward so that the baseline of the surrounding text matches that of the span’s inner text.
I hope this answers the question. Let me know if there’s anything you don’t understand.
Happy coding!
1 Like
Yes, this seems more helpful than following tutorials. Even if it takes forever, the point is to learn something truly.
Keep up the good progress
1 Like
Wow.Excellent explaination! It also benefits me!
1 Like
My understanding of @JuniorQ explaination.
span and its inner texts are two different parts but are combined together.
I mean in HTML structure(nested).
<span>inner texts</span>
and the span container will be inhibited by its inner text due to the typography based on baseline.
img which is a replace element and its actual content which is the image are a whole thing
<img src="alternative image"/>
So the container and its content of an img will not act like span container and its inner texts when surrounded by other texts,although they share the same way of typography based on baseline because you set display:inline-block;.
1 Like
