Neden following code div yüksekliği img yüksekliği daha büyük ? Aşağıdaki görüntü, fazladan bir boşluk var, ama doldurma/marjı gibi görünüyor değil mi. Nedir ?

HTML:

<div id="wrapper">
    <img src="http://i53.tinypic.com/2ymznmx.jpg" width="60" height="60" />
</div>

CSS:

#wrapper {
    border: 1px solid black;
}
img {
    border: 1px solid red;
}

ÇÖZÜM:

img {
    border: 1px solid red;
    vertical-align: top;     /* Add this */
}

Varsayılan olarak, bir satır içi resim, mektup gibi işlenir.

A, b, c ve d oturup aynı hat üzerinde oturur.

F, j, p ve q gibi harfleri bulmak kuyruklu için o satır boşluk vardır.

Bunu başka bir yerde konumlandırmak için resmin vertical-align ayarlayabilirsiniz.