0
div {
  width: 50vw;
  margin: 100px auto;
  border: 2px solid red;
}

img {
  width: 100%;
  display: block;
}

 <body>
    <p>before and after psuedo elements</p>
    <div>
      <img src="big.jpeg" alt="" />
    </div>
  </body>

enter image description here

The above image is without the display: block. you can notice a tiny gap in the bottom of the img between the img and the div.

enter image description here

Here the image is with the display: block which fits the height of the img to the height of the block.

width: 100% fits the width of the img to the weight of the day because they've is the parent element of Img. However height: 100% does not fit the height of the img to the height of the div. This maybe because for height: 100% to work as expected, the parent container must have a defined height. Here the parent container (which here is div) does not have a defined height, height: 100% will not work as expected, and the height of the image may not be constrained to the height of the container.

But display: block fits the height of the img to the height of the div. How ? I thought doesn't display: block only fit the width because block element stretches the horizontal width to the entire page or parent element. Why does display: block in <img> fit the height of the image to the height of the div?

I tried fitting the height and width of the image to the height and width of the div. I did not understand how display: block fits the height of the image that to the height of the div. Don't block level element is just set the width ? Do they fit the height too? If yes, under what circumstances?

Samrudh S
  • 33
  • 6
  • If you set the width of the image then it'll scale the height to retain the aspect ratio. If you set the height then it'll scale the width. Inline items won't fill the entire height because it leaves a space for [descenders](https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image) – Adam Apr 14 '23 at 09:16
  • that gap is called **inline decender space**. It is a space reserved for letters like j, y, p, q, g. – tacoshy Apr 14 '23 at 09:25
  • If the image is inline, then it sits on the baseline of the line box that it's in, and as @Adam says, that line has space below the baseline for descenders. If the image is block, then there is no line box, no baseline, and therefore no space that needs to be allocated for descenders, – Alohci Apr 14 '23 at 09:28
  • hey thanks everyone. @Alohci by line-box you mean, any box in general right ? like the container with boundaries that elements like div has. And every line-box has a baseline and anything below it is for the descenders. Everything in CSS is a line-box. I think I get the gist of it, but can you elaborate what a line box is in simple words. – Samrudh S Apr 14 '23 at 14:59
  • No, a line box is something special. The easiest way to understand a line box is to consider a block of text. Let's take the last paragraph of your question. Assuming you're reading it on a desktop-wide monitor, that's made up of 3 line boxes: "I ... not", "understand ... block" and "level ... circumstances?". More generally, inline content is laid out in line boxes. When a line is full, the text needs to start a new line, and so a new line box is created to put the text into. Images are, by default, inline content and you can think of an image as a single big text character. – Alohci Apr 14 '23 at 16:33
  • @Alohci when I added border to the bottom of the img. it just adds it below the visible part of the image. it does not add it below the inline decender space. it makes it look like inline descender space does not belong to the img element itself. may I know the reason why ? shouldn't the border be below the inline descender space since inline descender space is part of the img too. here is the image https://imgur.com/a/ZpzlvKM – Samrudh S Apr 15 '23 at 14:02
  • and I also checked in the dev tools to verify there's no margin. there's no margin. so inline descender space does not belong to the margin either for the border to not cover it. @Alohci – Samrudh S Apr 15 '23 at 14:10
  • Your observation is correct. I don't know what the reason was behind the CSS designers choice to make the bottom margin edge of replaced element sit on the baseline rather than the bottom content edge, (or padding edge, or border edge), any of them would have been possible, I think. But they had to choose one, and the bottom margin edge was the one chosen. – Alohci Apr 15 '23 at 14:22

0 Answers0