How to remove this extra indent at the very bottom, under the image? I read the article on Habré:

Probably, many, when html-layout, met the "bug" when, placing> in a block two images in a row, between them there is an interval> about 3-5 pixels. This effect is present not only in the hot>> favorite IE6, but also in other browsers. Most solved it with tambourines - Doctype substitution, removing extra padding in the html file and so on.

Starting to look for a solution to the problem on the Internet, including on the habr, I realized that there were many questions about this, but most did not find the correct answer. As a result, it turned out that this is not a bug at all. IMG is an inline element, and therefore the vertical-align property is applied to it. In browsers, this property is set by default (on most baselines, if I'm not mistaken).

It is enough to apply vertical-align: bottom to the image and there will not be indentation at the bottom. In other cases there will be ambiguity, and browsers will behave at their discretion. https://habrahabr.ru/post/51140/

BUT this technique and all the others do not work, if the methods except the negative margin remove this indent?

 * { margin: 0; padding: 0; } .clear, .clear:after { content: ""; display: block; clear: both; } div { width: 30%; border: 1px solid #888; margin: auto; } div p { width: 98%; margin: auto; } img { width: 35%; float: left; vertical-align: baseline; } 
 <div class="clear"> <img src="http://i1.mywishis.in/s/i/wishes/23/11/3/230x0_2311332646a15ea26e2b7172af891d87___jpg____4_1af7f70b.jpg" alt="img"> <p>Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p> </div>

for training: http://codepen.io/Geyan/pen/WxBQaK?editors=110

  • 2
    It seems you read the wrong article. The article refers to the pictures inserted as an element of the text. In your case, a float applied to the image, which makes it a block "outside" the text. And you need to decide whether to play with the size of a picture or the height of a line of text ( line-height ) - cyadvert
  • check before making quick conclusions - user33274
  • In fact, there is no indent, just the height of the image is not a multiple of the height of the line. If you set a rigid height - it is quite possible to remove the gap - Grundy

2 answers 2

This is not because of the image indentation, but because of the transfer of text. You can decide by changing the font-size or line-height

Example with changing line-height

 * { margin: 0; padding: 0; } .clear, .clear:after { content: ""; display: block; clear: both; } div { width: 30%; border: 1px solid #888; margin: auto; } div p { width: 98%; margin: auto; line-height: 1; } img { width: 35%; float: left; vertical-align: baseline; } 
 <div class="clear"> <img src="http://i1.mywishis.in/s/i/wishes/23/11/3/230x0_2311332646a15ea26e2b7172af891d87___jpg____4_1af7f70b.jpg" alt="img"> <p>Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p> </div>

Example with font-size change

 * { margin: 0; padding: 0; } .clear, .clear:after { content: ""; display: block; clear: both; } div { width: 30%; border: 1px solid #888; margin: auto; } div p { width: 98%; margin: auto; font-size: 14px; } img { width: 35%; float: left; vertical-align: baseline; } 
 <div class="clear"> <img src="http://i1.mywishis.in/s/i/wishes/23/11/3/230x0_2311332646a15ea26e2b7172af891d87___jpg____4_1af7f70b.jpg" alt="img"> <p>Nulla quis lorem ut libero malesuada feugiat. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Vivamus suscipit tortor eget felis porttitor volutpat. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus.</p> </div>

  • in both of your examples there is an indentation at the bottom of the image - user33274
  • The site displays the text a little differently, if you click edit> edit code and run, the formatting will be slightly different (better). - stackanon
  • I also say that the solution should be universal - I knowingly gave the link to codepen - user33274
  • Most likely there is no universal solution or it is on js, because even on your code, if you change the width of the window, you can catch both a normal indent and a large one. This is all because of the line that occupies the entire width, even though the text does not occupy the entire width. You can set the image to the right indent, so that when an indent appears, it looks normal. - stackanon
  • I asked both the right and left and general indentation, and this is why this question arose - user33274

Use the good old display:block .

Example number 1:

 img { display: block; float:left; border: 1px solid black; } 
 <div class="test"> <img src="http://gubkabob.xaaa.ru/img/gubka-bob-risuem-24.jpg" alt=""> </div>

Example 2 (with text):

 img { display: block; float:left; border: 1px solid black; } 
 <div class="test"> <img src="http://gubkabob.xaaa.ru/img/gubka-bob-risuem-24.jpg" alt=""> <img src="http://gubkabob.xaaa.ru/img/gubka-bob-risuem-24.jpg" alt=""> <p>dsadasdasdas as das das das dasd asd asd asd as dasd asdas</p> </div> <div class="test"> <img src="http://gubkabob.xaaa.ru/img/gubka-bob-risuem-24.jpg" alt=""> <p>dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas</p> </div> dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd <div class="test"> <img src="http://gubkabob.xaaa.ru/img/gubka-bob-risuem-24.jpg" alt=""> <img src="http://gubkabob.xaaa.ru/img/gubka-bob-risuem-24.jpg" alt=""> <p>dsadasdasdas as das das das dasd asd asd asd as dasd asdas</p> </div> <div class="test"> <img src="http://gubkabob.xaaa.ru/img/gubka-bob-risuem-24.jpg" alt=""> <p>dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas dsadasdasdas as das das das dasd asd asd asd as dasd asdas</p> </div>

  • and with the text the same experiment? - user33274
  • Give an @Geyan example of a specific one, otherwise it’s not entirely clear - user192664
  • @Geyan added an example with the text, if, of course, correctly understood - user192664
  • I like Nikita, of course, like a spongebob, but I need one picture and to wrap around her text without a lower indent - user33274
  • @Geyan Example number 2 watched? If you have questions write to the LAN, #soreadytohelp - user192664