Wysokość DIV w oparciu o wysokość obrazu podrzędnego dodaje kilka dodatkowych pikseli na dole.

Question

Dlaczego div elementu nadrzędnego ma kilka dodatkowych pikseli u dołu. W jaki sposób mogę usunąć piksele bez sztywnego kodu do głównej wysokości div.

http://jsfiddle.net/6x8Dm/

HTML

<div class="wrapper"> 
    <div class="column"> 
     <img src="http://www.lorempixel.com/200/200/" /> 
    </div>  
</div> 

CSS

.wrapper { 
    width:200px; 
    margin:0 auto; 
} 
.column { 
    width:100%; 
    background:#cc0000; 
} 

img { 
    width:100%; 
} 

Answer 1

Ta przestrzeń jest faktycznie wynikiem elementów podrzędnych w czcionkach. Można się go pozbyć na kilka sposobów:

• dodać vertical-align:top regułę obrazu jsFiddle example
• dodać font-size:0; do elementu div jsFiddle example
• dodać display:block; do obrazu jsFiddle example

Answer 2

Jednym ze sposobów jest poprzez ustawienie display:block na img, powodując jej wypełnienie rodzica.

jsFiddle here - to działa.

img { 
    width:100%; 
    display:block; 
} 

Ewentualnie, jeśli nie podoba takie podejście, można również zmienić wyrównanie w pionie, jak domyślnie jest baseline.