ログインしてさらにmixiを楽しもう

コメントを投稿して情報交換!
更新通知を受け取って、最新情報をゲット!

CSSテクニックコミュの画像の下に不明な隙間ができてしまいます

  • mixiチェック
  • このエントリーをはてなブックマークに追加
どうしても解決できなかったので書き込ませてください。
以前、どこかでトピを見たような気がしたんですが、
探してもなかったので…。

現象としては、画像の下に不明な隙間ができてしまうことです。
margin、padding、vertical-align、borderなどを
すべてなしにしても、なぜか不明な隙間が出来てしまうのです。
また、試しにボーダーをつけてみたところ、
なぜかボーダーの内側にその隙間ができているようなのです。

ちなみにWinIE6での現象で、FireFoxなどでは再現されませんでした。
以下がソースなんですが、これはIEのバグなんでしょうか?

HTML
---------------------------
<div class="newface-mem"><!-- newface-mem -->
<p>
<img src="images/mem-back-top.gif" width="500" height="15">
</p>
<div class="newface-data"><!-- newface-data -->
<div class="newface-mem-photo"><!-- newface-mem-photo -->
<img src="images/photo/tb-hito-l.jpg" width="175" height="190" alt="" />
</div>
<!-- /newface-mem-photo -->
<div class="newface-mem-prof"><!-- newface-mem-prof -->
<div class="newface-mem-prof-contents"><!-- newface-mem-prof-contents -->
<p class="newface-question">
■ 質問質問質問
</p>
<p class="newface-answer">
答え答え答え答え
</p>
</div><!-- /newface-mem-prof-contents -->
<div class="newface-mem-prof-contents"><!-- newface-mem-prof-contents -->
<p class="newface-question">
■ 質問質問質問
</p>
<p class="newface-answer">
答え答え答え答え
</p>
</div><!-- /newface-mem-prof-contents -->
<div class="newface-mem-prof-contents"><!-- newface-mem-prof-contents -->
<p class="newface-question">
■ 質問質問質問
</p>
<p class="newface-answer">
答え答え答え答え
</p>
</div><!-- /newface-mem-prof-contents -->
<div class="newface-mem-prof-contents newface-pr"><!-- newface-mem-prof-contents -->
<p class="newface-question">
■ 質問質問質問
</p>
<p class="newface-answer">
答え答え答え答え
</p>
</div><!-- /newface-mem-prof-contents -->
</div><!-- newface-mem-prof -->
<div class="clear"></div>
</div><!-- /newface-data -->
<p>
<img src="images/mem-back-bottom.gif" width="500" height="15">
</p>
</div><!-- /newface-mem -->


CSS
---------------------------------

div#newface-container{
width: 500px;
margin: 0 auto;
margin-top: 15px;
}

div#newface-header{
margin-bottom: 30px;
width: 100%;
}

.newface-cap{
font-size: 80%;
}

.newface-mem{
margin-bottom: 30px;
}

.newface-data{
background: url("../newface/images/mem-back.gif") left top repeat-y;
padding: 5px 0 10px 20px;
width: 480px;
}

.newface-mem-photo{
float: left;
margin-right: 20px;
width: 175px;
}

.newface-mem-prof{
font-size: 90%;
padding-right: 20px;
margin-left: 195px;
width: 255px;
}

.newface-mem-prof-contents{
margin-bottom: 15px;
}

.newface-question{
border-bottom: solid 1px;
font-weight: bold;
margin-bottom: 0.5em;
width: 100%;
}

.newface-mem-prof-contents.newface-pr{
margin-bottom: 0;
}

.newface-mem-prof-contents.newface-pr .newface-answer{
text-indent: 1em;
}

コメント(6)

画像を梱包している要素のfont-sizeを0pxなり
画像のheightより低い値にしてやればいいと思います。
改行だかなんだかわからない様な空文字が入るみたいなので。
色々な意見ありがとうございます。
忙しくて、暫定的な処置でとりあえず作ってしまい、
まだ上記のことを確認していません…。
が、なんとなくimgへのvertical-alignで解決できそうな気がしてます。
もしそれでもダメなら、他の方法を試してみたいと思います。

ありがとうございました!
どうやら理屈的にそういうことらしいので・・・。

ログインすると、みんなのコメントがもっと見れるよ

mixiユーザー
ログインしてコメントしよう!

CSSテクニック 更新情報

CSSテクニックのメンバーはこんなコミュニティにも参加しています

星印の数は、共通して参加しているメンバーが多いほど増えます。

人気コミュニティランキング