Why is there space under the image in this code?
css, html
Solution
The `img` element is `inline` by default. `inline` elements act as text and default to a `vertical-align: baseline`. This means that the bottom of the image aligns with the bottom of your text. Notice that a lower case p or g goes below the bottom of the vertical text alignment. You can fix it by either adding `vertical-align: bottom` OR `display: block`.
Problem
I have the following code, and it allows the red to show through from the a element. Why is this. I would have expected that the a element would only expand to the size of the contents but it looks like it's a bit bigger than that. See the codepen here http://codepen.io/anon/pen/soqEz. HTML ``` <a href="#"><img src="http://placehold.it/150x150" /></a> ``` CSS ``` a{ background: red; margin-bottom:0; padding-bottom:0; border-bottom:0; } img { margin-bottom:0; padding-bottom:0; border-bottom:0; } ``` EDIT: I see the answers below ... but can anyone also explain why the space is there AT ALL ( I mean given that it's a block level element ... what's the purpose of it in the first place ) ... as opposed to trying to get rid of it. Thanks