※ ChatGPTを利用し、要約された質問です（原文：ホームページのメニューと写真の間に、すき間があく。）
ホームページのメニューと写真の間にすき間ができる理由
このQ&Aのポイント
ホームページのメニューと写真の間にすき間ができる問題が発生しています。IE８では問題ありませんが、firefox5やchromeではトラブルが発生します。
メニューバーと写真の間のすき間を調整するために、marginやpaddingを設定しても解決しない場合があります。
原因としては、floatやvertical-alignの設定が正しくない可能性があります。HTMLとCSSのコードをご確認の上、適切な設定をお願いします。
ホームページのメニューと写真の間に、すき間があく。
はじめまして。
現在、webデザインの勉強のために架空のサイトを作っています。
そこで、
写真にあるようにメニューバーと
その下の写真との間にすき間ができてしまいます。
IE８では、問題ありません。
firefox5,choromeでトラブルがあります。
調べて
メニューと、下の写真のmarginとpaddingを0にしたり、
vertical-alignを指定してみたりしたのですが、
変わりませんでした。
下記にそのhtmlとcssを載せていますので、
ご指摘お願いします。
※dream weaver cs5で作りました。
===========================================
html
<div id="menu">
<ul>
<li><img src="image/btn_01_s1.jpg" width="160" height="50" alt="ホーム" /></li>
<li><img src="image/btn_02_s1.jpg" width="160" height="50" alt="事業内容" /></li>
<li><img src="image/btn_03_s1.jpg" width="160" height="50" alt="実績と強み" /></li>
<li><img src="image/btn_04_s1.jpg" width="160" height="50" alt="資料請求" /></li>
<li><img src="image/btn_05_s1.jpg" width="160" height="50" alt="会社概要" /></a></li>
</ul>
<!-- / #menu --></div>
<div id="photo">
<p><img src="image/catch_s1.jpg" width="800" height="280" /></p>
<!-- / #photo --></div>
=============================================
css
/*メニューバー*/
#menu {
width: 800px;
height: 50px;
margin: 0px;
padding: 0px;
}
#menu ul li {
float: left;
border-style: none;
vertical-align: text-bottom;
}
/*写真*/
#photo {
clear: both;
height: 280px;
width: 800px;
margin: 0px;
padding: 0px;
}
