質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Q&A

解決済

2回答

323閲覧

意図しない余白を消去したいです。

ar11

総合スコア10

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

0グッド

0クリップ

投稿2019/02/23 06:36

編集2019/02/25 13:38

前提・実現したいこと

下の画像の赤枠部分に生まれる余白を消したいです。

イメージ説明

発生している問題・エラーメッセージ

リセット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> <!-- フッター ここまで-->

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

FKM

2019/02/23 06:45

CSSを見ないとなんともいえませんね。
kei344

2019/02/23 06:50

(質問文は編集できます)質問文のコードはHTML/CSSそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
yoshinavi

2019/02/23 10:41

余分な「全角スペース」が、コードのどこかに入っていないのは確認されてますか?
ar11

2019/02/25 11:51

返信が遅れて申し訳ないです。 FKMさん CSSを記載するのを忘れてました。すいません・・・ kei344さん まだ利用し始めたばかりで勝手がよく分かっていませんでした。 今度からはコード入力時はコードブロックで囲むように注意します。 ご指摘ありがとうございます。 yoshinaviさん 確認したところ、仰る通り「全角スペース」が存在しました。 コメント内に打ち込んだつもりがコメントの外になっていました。 無事解決できました。ご指摘ありがとうございます。
yoshinavi

2019/02/25 12:01

推測ですが・・・「FKM」さんや「kei344」さんのご指摘部分のとおり、症状が再現するHTMLとCSSのコードを、コードブロックで提示されていると、「全角スペース」はもっと早く解消できていた可能性があり、使用するエディタでも、「全角スペース」の表示設定を行っていれば、この問題にご自身で気付く事が出来たと思われます。
kei344

2019/02/25 12:11

まだ質問が「受付中」になっていますが、どのように解決したのかを回答文に書き、「解決済」にされてはいかがでしょうか。また、ここは「質問への追記・修正の依頼」です。解決済にしても本文を編集することが出来ますので、よろしくお願いします。
guest

回答2

0

自己解決

<!-- フッター ここから--> の前に「全角スペース」が入力されてい為、この「全角スペース」を削除したところ、解決できました。

投稿2019/02/25 13:41

ar11

総合スコア10

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ご提示のコードだけではなんとも言えないんですが、ロゴ.pngを包括するdiv要素に幅ができているのとul要素にmaeginが生じているのは確認できるので、そのあたりをいじってみてはどうでしょう。

投稿2019/02/23 06:45

yu-smc

総合スコア610

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

ar11

2019/02/25 11:54

yu-smcさん 返信が遅れて申し訳ないです。 謎の余白の原因は「全角スペース」でした。 無事解決できた事をお伝えします。 ご指摘ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問