Dlaczego mój obraz ma miejsce pod spodem?

Question

Obrazy zyskują tajemniczą pustą przestrzeń pod spodem, nawet jeśli zastosowane są padding:0;margin:0.

Demonstration

Czerwona granica powinna przytulić obraz, ale nie ma miejsca na spodniej stronie.

Co powoduje to i jak mogę usunąć to miejsce?

Answer 1

Obrazy (i ogólnie elementy bloków śródliniowych) są traktowane jak znak.

Jako takie są one zgodne z zasadą linii bazowej.

W zwykłym tekście linia bazowa to linia znajdująca się u dołu większości liter, na przykład w tym zdaniu.

Ale niektóre litery, takie jak p, q, j itd. Mają ogonki, które spadają poniżej linii podstawowej. Aby zapobiec kolidowaniu tych kolejek z literami w następnej linii, przestrzeń jest zarezerwowana między linią podstawową i dolną.

Ten schemat ilustruje różne linie wykorzystywane przez tekstem:

(obraz z WHATWG)

Tak, obraz jest wyrównany do linii bazowej, nawet jeśli nie ma tekstu. Na szczęście poprawka jest bardzo prosta:

img {vertical-align:bottom} 

ta dostosuje obraz do dolnej linii, również usunięcie przestrzeń tajemnicy.

Uważaj, jeśli Twój obraz jest mały (mniejszy niż wysokość linii), możesz zacząć widzieć przestrzeń tajemnicy pojawiającą się nad obrazem. Aby to naprawić, dodaj element line-height:1px do elementu kontenera.

Mam nadzieję, że pomoże to wielu osobom, które widziałem, pytać o to i podobne problemy!

Answer 2

Zmiana img do elementu blokowych

img { 
    display: block; 
} 

również usunąć miejsca poniżej obrazu.

Answer 3

Sprawdź tę CSS jsfiddle CSS

div {border:1px solid red;width:100px;line-height:0} 
img {width:100px;}