前提・実現したいこと
下の画像の赤枠部分に生まれる余白を消したいです。
発生している問題・エラーメッセージ
リセットCSSでaside・footerのmargin/paddingをゼロにしており、
開発者ツールでも確認したところ、両者に意図しないmargin/paddingはないにも関わらず添付画像にある余白が出現してしまいます。
該当のソースコード
コードは以下の通りです。
HTML
<aside> <div class="a_box"> <a href="#"> <div> <p>お問合せ</p> </div> </a> </div> <div class="a_box"> <a href="#"> <div id="access"> <p>アクセス</p> </div> </a> </div> <div class="a_box"> <a href="#"> <div> <p>資料請求</p> </div> </a> </div> </aside> <!-- フッター上 ここまで--> <!-- フッター ここから--> <footer> <div id="f_box1"> <div> <img src="img/ロゴ.png" alt> </div> <ul class="clearfix"> <a href="#"> <li id="s_map">サイトマップ</li> </a> <a href="#"> <li id="policy">サイトポリシー</li> </a> </ul> </div> <div id="f_box2" class="clearfix"> <p id="f_add">aaaaaaaa</p> <p id="f_copy">bbbbbbbbbbbb</p> </div> </footer> <!-- フッター ここまで-->
CSSを見ないとなんともいえませんね。
(質問文は編集できます)質問文のコードはHTML/CSSそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
余分な「全角スペース」が、コードのどこかに入っていないのは確認されてますか?
返信が遅れて申し訳ないです。
FKMさん
CSSを記載するのを忘れてました。すいません・・・
kei344さん
まだ利用し始めたばかりで勝手がよく分かっていませんでした。
今度からはコード入力時はコードブロックで囲むように注意します。
ご指摘ありがとうございます。
yoshinaviさん
確認したところ、仰る通り「全角スペース」が存在しました。
コメント内に打ち込んだつもりがコメントの外になっていました。
無事解決できました。ご指摘ありがとうございます。
推測ですが・・・「FKM」さんや「kei344」さんのご指摘部分のとおり、症状が再現するHTMLとCSSのコードを、コードブロックで提示されていると、「全角スペース」はもっと早く解消できていた可能性があり、使用するエディタでも、「全角スペース」の表示設定を行っていれば、この問題にご自身で気付く事が出来たと思われます。
まだ質問が「受付中」になっていますが、どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。また、ここは「質問への追記・修正の依頼」です。解決済にしても本文を編集することが出来ますので、よろしくお願いします。
回答2件
あなたの回答
tips
プレビュー