CSS - 画像の下に出る隙間を調整する

画像の下に出る隙間を調整するテストです。
Tried at 2010-05-14

まず，マークアップは次の通り

<div class="section">
  <p><img src="img/photo.jpg" alt="photo" width="360" height="270" /></p>
</div>

処置なし

photo

div.section p {
  width: 360px;
  border: solid 3px #CCC;
  background: #FFD9D9;
}
  • 画像の下に隙間ができる。line-height: 1.5;
  • IE6, 7 では隙間は出ない。

line-heightを調整

photo

div.section p {
  width: 360px;
  border: solid 3px #CCC;
  background: #FFD9D9;
  line-height: 1;
}
  • 小さくなったが、まだ残っている。
  • IE6, 7 では隙間は出ない。

vertical-alignを調整

photo

div.section p {
  width: 360px;
  border: solid 3px #CCC;
  background: #FFD9D9;
}

div.section p img {
  vertical-align: bottom;
}
  • なくなった！