img tag wyrzuca poza linię-wysokość - html, image, css

W porządku, więc to niektóre z css i html:

css:

div {
height:24px;
line-height:24px;
}

html:

<div><img src="/images/image.png"/>Text</div>

Teraz to, co powinno (myślę) produkować, to divto jest 24 piksele wysokości, a tekst powinien być wyrównany pionowo w div, po obrazie. P.S. obraz ma rozmiar 24x24px. Jednak wyrzuca wysokość linii na około 12px za dużo (zmniejszenie wysokości linii do 12px nie rozwiązuje jej). Zmiana obrazu na 12x12px działa i umieszcza tekst we właściwym miejscu. jeśli obraz zostanie całkowicie usunięty, tekst jest we właściwym miejscu. Myślę, że moje pytanie brzmi: dlaczego to robi to, co jest i czy / jak mogę to naprawić.

Dzięki, Sharf.

Odpowiedzi:

Dać vertical-align:middle img

div > img
{
float:left;
vertical-align:middle;
}

Skrzypce

Spróbuj dodać wyrównanie pionowe do img i eksperymentuj z tym, aby uzyskać je tak, jak chcesz.

Najprostszym (ale nie zawsze najlepszym) rozwiązaniem jest

img { vertical-align: bottom; }

Obraz nie zrzuca wysokości linii; raczej powoduje, że wysokość pola liniowego staje się większa niż line-height. Powodem tego jest domyślnie obrazjest traktowany tak, jakby był literą o rozmiarze określonym przez wymiary obrazu, siedząc na linii bazowej tekstu. Tak więc obraz wymaga wysokości, która jest wysokością samego obrazu plus odległość między linią bazową tekstu a dolną częścią czcionki.

W terminach CSS „siedzenie na linii bazowej tekstu” jest spowodowane domyślnym ustawieniem vertical-align: baseline. Możesz to zmienić na różne sposoby, z różnymi efektami na pionowe rozmieszczenie, ale uważaj, że przeglądarki mają wiele błędów w implementacji vertical-align, a wartość bottom jest tak prosty, że prawdopodobnie dobrze to zrobią.