Problem CSS/HTML.Obraz nie wypełnia div
To jest szalone - mogę tylko założyć, że jestem idiotą. Nie mogę sprawić, by mój obraz wypełnił element div, w którym się znajduje. Pod obrazem znajduje się "dopełnienie" 5px.
Oto html:
<!doctype html>
<head><link rel="stylesheet" href="style.css" type="text/css" /></head>
<body>
<div class="row">
<img src="pic2.jpg" />
</div>
</body>
A oto CSS:
body, .row, img {
padding: 0;
margin: 0;
border: none;
}
.row {
width: 80%;
background-color: orange;
}
img{
width: 50%;
}
Jest to wynikiem:
Jak widać, The (głupi) niebieski i czerwony obraz nie wypełnia pomarańczowego div. Pod obrazem widać spójne 5 pikseli pomarańczy. Nie ma na to wpływu zmiana% szerokości elementu div lub obrazu lub zmiana rozmiaru okna.
Mogę to naprawić z "marginesem: -5px;", ale chcę wiedzieć, dlaczego tak się dzieje (zwłaszcza jeśli w innych okolicznościach kwota jest mniejsza lub równa 5px).
Dzięki za pomoc (i ponownie przepraszam, jeśli jest to śmieszny błąd z mojej strony).
Oto żywy przykład http://jsfiddle.net/aDtUm/ – jacktheripper