2012-04-22 5 views
5

CSS/HTML проблема.Изображение не будет заполнено div

Это сумасшествие - я могу только предположить, что я идиот. Я не могу заставить мое изображение заполнить div, в котором он находится. Постоянно 5px «padding» под изображением.

Вот HTML:

<!doctype html> 

<head><link rel="stylesheet" href="style.css" type="text/css" /></head> 

<body> 
<div class="row"> 
<img src="pic2.jpg" /> 
</div> 
</body> 

А вот CSS:

body, .row, img { 
padding: 0; 
margin: 0; 
border: none; 
} 

.row { 
width: 80%; 
background-color: orange; 
} 

img{ 
width: 50%; 
} 

Это результат:

http://imgur.com/yELMe

Как вы можете видеть, (глупый) синее и красное изображение не заполняет оранжевый div. Под изображением находится непрозрачный 5px оранжевого цвета. На это не влияют изменения ширины% div или изображения или изменение размера окна.

Я могу исправить это с помощью «margin: -5px;», но я хочу знать, почему это происходит (особенно если в разных обстоятельствах сумма больше или меньше 5 пикселей).

Благодарим за помощь (и жаль, если это смехотворная ошибка с моей стороны).

+0

Вот живой пример http://jsfiddle.net/aDtUm/ – jacktheripper

ответ

17

Добавить vertical-align значение (кроме по умолчанию baseline) к изображению, как: top, middle ...

vertical-align: top; 
+0

Это удивительно - Почему это сработало? – jkdune

+1

Существует «нарушение» с естественным плавающим для страниц встроенными изображениями (не плавающие), они начинают уважать пространства элементов, предоставляемые для типографии, такие как размер шрифта, высота строки и другие. Вы можете легко проверить это (в нерабочем демо): просто добавьте body {font-size: 50px;}, и вы увидите, как увеличится маржинальное пространство. Установив вертикальное выравнивание по изображениям, мы гарантируем, что место размещения отличается от стандартного браузера. –

+0

Правильно, я понимаю. Я бы никогда не справился с этим. В очередной раз благодарим за помощь! – jkdune

Смежные вопросы