HTMLでの余計な空白が出来ます（超初心者）

Question

前提・実現したいこと

HTMLでの余計な空白を消したいです。

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

google　chromeのデベロッパーツールで見ても
marginはありませんが空白があります。

該当のソースコード

　　　　　　　<li>
<h3>FPとは</h3>
<p>ファイナンシャル・プランニングとは・・・</p>
</li>
/ここに空白が入ります/
<li>
<h3>FPの社会的役割</h3>
<p>FPは、国民一人ひとりの経済的自立・・・</p>
</li>
<li><h3>FPの職業倫理</h3>
FPは顧客の収入や・・・
</li>

```CSS

body{
       margin: 0;
}

body p{
        margin: 0;
}
h1, h2, h3, h4, h5, h6{
       margin: 0;
    padding: 0;
}
ul, li{
    list-style: none;
    margin: 0;
    padding-left: 0;
    display: block;
}

試したこと

超初心者なので簡単なミスでしたらすいません・・・
1時間悩みました。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Comments

[kei344]

書かれている状況が再現するコード（HTML/CSS）全体か、再現するURLを提示されたほうが回答を得やすいと思います。

[hayato336]

ありがとうございます。編集して再投稿します。

Answer 1

空白が入る部分の前後に「全角のスペース」が、どこかに入っている可能性があります。

<li>  
<h3>FPとは</h3>  
<p>ファイナンシャル・プランニングとは・・・</p>  
</li>　<!-- ← この部分とか -->
<li>   
<h3>FPの社会的役割</h3>      
<p>FPは、国民一人ひとりの経済的自立・・・</p>  
</li>          
<li><h3>FPの職業倫理</h3>  
FPは顧客の収入や・・・  
</li>  

Comments

[hayato336]

ありがとうございます。出来ました！初心者なので初歩的ですいません。
今後はどの様に防げばいいのでしょうか？

[yoshinavi]

大丈夫ですよ！初めは皆、似たような問題で悩んでいますから。
テキストエディター等をお使いであれば、全角スペースを表示させる機能があるので、マニュアル等で確認してみてください。
もし、その機能がないエディタであれば、機能があるエディタに、変更されると良いかと思います。
「全角スペース」は作成していると、知らず知らずに入ってしまう場合もあるので、「全角スペース」が見えるエディタ必須です。

[hayato336]

色々助かります。こんな事で何時間も悩んでましたのですっきり眠れます。

[yoshinavi]

解決されて何よりです。
(^^)

Answer 2

僕もやってみましたが空白は入らないですね...。
ただ、気になったのが<li>の親要素である<ul>もしくは<ol>がないので設定してあげた方が良いと思います。
CSSですが全てをmargin:0にしたい場合は *(これですべての要素を選択)をプロパティにしてmargin:0を設定してあげると1行で済みますよ ^^)

Comments

[hayato336]

ありがとうござます。色々試しているうちに散らかってしまいました。
＊を先頭に使って見ましたが消えませんでした。

[maakun]

もし可能でしたらデベロッパーツールでの空白箇所のスクショって撮れたりしますか？？

[hayato336]

やってみます。

[maakun]

お待ちしています^^

[hayato336]

ありがとうございました。初歩的なミスでした。（私自身は知りませんでしたが）

Answer 3

すでにご存知かもしれませんが、各ブラウザに標準のスタイルシートが搭載されているので、もしかするとそれが原因で余計なスペースが空いているのかもしれません。
手取り早い方法としてはワイルドにすると、ブラウザ標準無駄なスペースは消えると思います。

*{
  margin: 0;
  padding: 0;
}

Comments

[hayato336]

ご回答ありがとうございます。消えませんでした。

[退会済みユーザー]

お力になれず申し訳ありません。
ほかに思いついたものだと
1. display:blockでブロック要素になっているので、インラインにしてみる。
2.box-sizingを弄ってみる。
とかでしょうか？

[hayato336]

ありがとうございます。やってみます。