MDN provides insight about the img element in regard to styling with CSS, highlighting how images interact within an inline formatting context.
The positioning of images when used in-line can be affected by vertical-align: baseline due to <img> not having a baseline.
Recently, I encountered an issue with an image that had a small gap below it. The code snippet is as follows:
p {
border: 5px red solid;
margin: 0;
}<img src="https://images.unsplash.com/photo-1661177405620-24e65f27ac0e?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" width="250px" />
<p>This is a paragraph with a gap above it</p>I am puzzled as to why my image has this gap despite being in a block formatting context defined by the <p> element, which is a block-level element.
How does the inline formatting context come into play here?
Normally, the gap would only appear if the image was placed in an inline formatting context, but based on my understanding, this shouldn't be the case with the current setup.
I may have misconstrued some aspects of this topic. Any clarification would be greatly appreciated. Thank you!