CSS

main div.image { display: block; width: 100%; } main div.image img { width: 100%; height: auto; }

HTML

 <div class="image"> <img src="/images/nature-1.jpg" alt=""> </div>

The problem is that this code (yes, even without any CSS, just a picture in another tag) adds extra space to the bottom of the parent block.

enter image description here

You may notice that the picture itself has already "ended", but some free space is added to the parent block anyway. What is the reason and how to get rid of it - the question . Although, maybe, this is normal and is added regardless of my desire, just like the margins of p . Although you can get rid of them.

  • Maybe the very picture below has space that you take for indenting. height: auto; it seems it is not necessary to write - stackanon
  • @stackanon is not, the picture does not have that. Now div.image is highlighted, with img highlighting only, there is no indent. - smellyshovel

3 answers 3

The picture, by default, is displayed as a string element, which is affected by the height of the line. That line height is responsible for the distance between the div and img .

There are two solutions:

  1. Zero the line height for the wrapper.
  2. Make a picture of a block element.

 .holder { border: 1px solid lime; outline: 1px solid #000; width: 100px; } .fix-1 { line-height: 0; } .fix-2 img { display: block; } 
 <div class="holder"> <div class="fix-1"> <img src="http://satyr.io/100x100/1" alt=""> </div> <div class="fix-2"> <img src="http://satyr.io/100x100/2" alt=""> </div> </div>

  • Great, it works. Thank. It is strange that I did not notice this behavior before. It looks like my perfectionism is beginning to cross all borders XD - smellyshovel
  • And yes, the second option is better, because as in .holder I can then want to add another span with the description of the picture, and then the entire height of the line will collapse, so it’s best to make the image a block. - smellyshovel
 main div.image img { width: 100%; height: auto; }

Can add

 vertical-align: top;

either use

 display: block;
  • Plus behind vertical-align: top , I forgot about him - VenZell

add display: block to styles; - this behavior was originally due to the fact that the default picture is inline

 main div.image img { display: block; width: 100%; height: auto; }
  • Is it an inline block, and not just an inline? - smellyshovel
  • @smellyshovel, you are right, now I will correct - Boris Begibimov