In task 3 there seems to be some padding between the balloon image and the border of the containing box. When using the developer tools, all padding and margin values on the respective elements have values of 0px.
So where is this gap coming from?
Hi @jruota
Interesting observation! I didn’t get the reason at first either, but after some experimenting I think I understand. 
The reason is that the image is an inline element by default. This means it behaves like text and sits on the baseline. The little space we see is for descenders of characters like “g”, “y” or “j”.
If we want to get rid of the gap, the best way in this case would probably be to set display: block; on the image. Other possibilities are using vertical-align: bottom; on the image or line-height: 0; on the div.
Have a nice day,
Michael