Представим что возникла необходимость создать галерею фотографий. У каждой фотографии есть внешний контейнер с определенным оформлением, что-то вроде этого:
HTML:
<div class="photo">
<p>Габриэль Батистута</p>
<img src="batistuta.jpg" width="380" height="277" alt="Габриэль Батистута" />
</div>
и собственно стили:
.photo{border:solid 3px #000;width:380px;font-family:"Trebuchet MS"}
.photo p{text-align:center;padding:10px 0;background:#FFCC99}
Казалось бы все должно быть нормально. Во всех основных браузерах так и происходит, однако в Internet Explorer появляется какой-то отступ после изображения. Взгляните:
Есть как минимум два способа решения проблемы.
1. Если вы не планируете размещать какой-либо текст вместе с фотографией, то достаточно просто для внешнего контейнера установить размер шрифта равный 0.
.photo{border:solid 3px #000;width:380px;font-family:"Trebuchet MS";font-size:0}
.photo p{text-align:center;padding:10px 0;background:#FFCC99}
2. В нашем же случае, когда фотография имеет подпись, нужно в html коде убрать все пробелы между изображением и закрывающим тегом родительского контейнера.
<div class="photo">
<p>Габриэль Батистута</p>
<img src="bati.jpg" width="380" height="277" alt="" /></div>