![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
メイン画像とグローバルメニューの間に3pxくらいの隙間が空きます。
マージンやpadding等をいじっても改善する事が出来ませんでした。
IE6・Firefoxとも同じ症状が出ます。
CSSを勉強中なので初歩的なミスかと思いますが、宜しくお願いします。
【HTML】
<!--メインイメージ開始-->
<img src="images/img.jpg" / alt="○○○ホームページ">
<!--メインイメージ終了-->
<!--回り込み解除-->
<div class="clear"></div>
<!--グローバルメニュー開始-->
<div id="glmenu">
<ul>
<li id="m_top"><a href="#">トップ</a></li>
<li id="m_menu_list"><a href="#">メニュー1</a></li>
<li id="m_store"><a href="#">メニュー2</a></li>
<li id="m_history"><a href="#">メニュー3</a></li>
<li id="m_check"><a href="#">メニュー4</a></li>
</ul>
</div>
<!--グローバルメニュー終了-->
【CSS】
/*=======メニュー全体=======*/
#glmenu{
width:630px;
height:40px;
margin:0;
padding:0;
position:relative;
}
#glmenu ul {
width:630px;
height:40px;
padding:0;
margin:0;
}
#glmenu li {
margin:0;
padding:0;
list-style-type:none;
float:left;
text-indent:-2000px;
}
/*=======トップ=======*/
#glmenu li#m_top a {
background:url(images/m_top.jpg);
width:126px;
height:40px;
display:block;
text-decoration:none;/*ネスケ用*/
outline:none;/*Firefox用*/
}
/*=======メニュー1=======*/
#glmenu li#m_menu_list a {
background:url(images/m_menu_list.jpg);
width:126px;
height:40px;
display:block;
text-decoration:none;/*ネスケ用*/
outline:none;/*Firefox用*/
}
/*=======メニュー2=======*/
#glmenu li#m_store a {
background:url(images/m_store.jpg);
width:126px;
height:40px;
display:block;
text-decoration:none;/*ネスケ用*/
outline:none;/*Firefox用*/
}
/*=======メニュー3=======*/
#glmenu li#m_history a {
background:url(images/m_history.jpg);
width:126px;
height:40px;
display:block;
text-decoration:none;/*ネスケ用*/
outline:none;/*Firefox用*/
}
/*=======メニュー4=======*/
#glmenu li#m_check a {
background:url(images/m_check.jpg);
width:126px;
height:40px;
display:block;
text-decoration:none;/*ネスケ用*/
outline:none;/*Firefox用*/
}
こんな感じです。
なぜ、このような隙間が空いてしまうのか、改善方法を教えていただけないでしょうか?
宜しくお願いします。
No.1ベストアンサー
- 回答日時:
img要素をブロック要素にするのはどうでしょう?
img {
display:block;
}
このソースだけではわかりませんが、もしもimg要素がbody直下に書かれているようであれば文法的にブロック要素(pなりdivなり)で囲ってやる必要があります。
あと、<div class="clear"></div>はたしか<div class="clear"><!-- 回り込み解除 --></div>のようにコメントアウトをいれないと上手く動かないブラウザがあったような気がします。
ご親切に説明していただきありがとうございます。
今まで、メニュー部分にしかdisplay:block;を使用したことがなかったので、img等にも使用できるとは知りませんでした。
ありがとうございます。
No.2
- 回答日時:
img{
vertical-align:bottom;
}
を足してみてください。メニュー部分とは多分関係ないです。
デフォルトではbaselineが多いですので。
解説すると、アルファベットのbaselineは下が揃ってますよね。これにgjpqyy等下にぴょこんと出た部分が今のすき間と言っておられる部分だと思います。日本語のしたはbaselineに合っているので、文字がないと画像がその分浮いた形で表示されるように見えます。
親切に教えていただきありがとうございます。
変な隙間を解消することができました。
グローバルメニューの上部に隙間が空いている場合でも、アルファベットのベースラインが関係してくるのでしょうか?
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・「I love you」 をかっこよく翻訳してみてください
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・昔のあなたへのアドバイス
- ・かっこよく答えてください!!
- ・あなたが好きな本屋さんを教えてください
- ・スタッフと宿泊客が全員斜め上を行くホテルのレビュー
- ・【大喜利】【投稿~8/27】 こんなガソリンスタンド二度と来るか!なぜそう思った?
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・【お題】動物のキャッチフレーズ
- ・【お題】甲子園での思い出の残し方
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・「それ、メッセージ花火でわざわざ伝えること?」
- ・自分用のお土産
- ・人生で一番お金がなかったとき
- ・一番好きなみそ汁の具材は?
- ・泣きながら食べたご飯の思い出
- ・ちょっと先の未来クイズ第1問
- ・ゴリラ向け動画サイト「ウホウホ動画」にありがちなこと
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
【CSS】ヘッダーの高さが不明の...
-
ライトボックスでスクロールバー
-
form input テキストを上下中央...
-
画像イメージの上下左右、欲し...
-
CSS/HTML で画像 2枚重ねた上に...
-
divで囲まれたpaddingの指定を...
-
投稿フォームの整列
-
Media Queries 4 で 非推奨とな...
-
border-style:solidで文字がずれる
-
footer を横幅いっぱいに広げる...
-
ワードプレスのテーマParabola...
-
ウェブページの上下に暗幕を表...
-
テーブルのセル間に余白が空い...
-
CSSのposition値の上書き(打消...
-
dl,dt,ddタグでdtに対して、row...
-
CSS、width100%でもできる余白
-
IEでだけ1つのDivがずれる。
-
borderをページの下まで伸ばしたい
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
htmlの文字が縦書きになる
-
widthやheightの数値に単位(px...
-
画像イメージの上下左右、欲し...
-
css初心者 フレックスボックス...
-
form input テキストを上下中央...
-
CSSでボックスのheightが0になる
-
CSS、width100%でもできる余白
-
CSSがなぜかfont-sizeだけ効か...
-
footer を横幅いっぱいに広げる...
-
CSS:animation開始位置の設定
-
【CSS】ヘッダーの高さが不明の...
-
CSSで背景画像を一番下にもって...
-
W3Cのソースコードの検証サービ...
-
表示倍率を変えるとレイアウト...
-
<div>と<div>の間の10px程の...
-
HTMLのiframeの入れ子について
-
余分な縦スクロールバーが出て...
-
HTMLで一部だけスクロールする...
-
【HTML&CSS】フッター下部の余...
-
Media Queries 4 で 非推奨とな...
おすすめ情報