Bug bizarre avec Border/Contour/Marge/Rembourrage

Question

HTML (3x fois):

<div class="scream"> 
    <div class="author"> 
    <img src="avatars/dagrevis.png" alt="" title="daGrevis" /> 
    </div> 
    <div class="data"> 
    <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry...</span> 
    </div> 
    <div class="clearer"></div> 
</div> 

CSS:

.scream { 
    background: #F4F4F4; 
    width: 944px; height: 48px; 
} 

.scream .author { 
    float: left; 
} 

.scream .data { 
    float: left; 
} 

.clearer { clear: both; } 

Voici à quoi il ressemble sur mon navigateur:

Comme vous pouvez le voir, height est défini sur 48px. La taille des images est également de 48px. Comment ça se fait que je ne vois pas chaque div.scream dans une ligne séparée? Si je mets height à 50px, par exemple, tout fonctionne! À mon avis, c'est parce qu'il y a une sorte de bordure/contour/marge/rembourrage qui gâche ma vie. Malheureusement, avec FireBug, je ne vois rien comme ça ...

Answer 1

Le bord inférieur d'un L'image est alignée avec la ligne de base (la ligne grise) de la boîte de ligne par défaut. L'espace au-dessous de la ligne de base (également appelé «espace descendeur») est la cause de votre problème. Voir this article par Eric Meyer pour plus de détails.

Pour résoudre ce problème, ajoutez cette règle:

.scream .author img { 
    display: block; 
} 

Ou celui-ci:

.scream .author img { 
    vertical-align: bottom; 
} 

Answer 2

Si vous jouez avec un inspecteur DOM pendant un certain temps, vous verrez que .author sort avec une taille de 52px ou plus. Le 4px supplémentaire semble provenir du line-height. Réglage line-height-0:

.scream .author { 
    float: left; 
    line-height: 0; 
} 

Correction de la mise en page: http://jsfiddle.net/ambiguous/8KzdD/

Ou, vous pouvez flotter l'image vers la gauche ainsi:

.scream .author { 
    float: left; 
} 
.scream .author img { 
    float: left; 
} 

qui supprimera l'image du flux local et rendre le line-height non pertinent: http://jsfiddle.net/ambiguous/8KzdD/1/

Encore une autre option consiste à abandonner la compensation <div> et utiliser overflow:hidden sur l'extérieur <div>:

.scream { 
    background: #F4F4F4; 
    width: 944px; 
    height: 48px; 
    overflow: hidden; 
} 

Cela laissera le <div class="author"> avec leur hauteur de 52px, mais l'effet ne sera pas visuellement perceptible: http://jsfiddle.net/ambiguous/8KzdD/2/