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

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

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

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

3963閲覧

CSSのinline-blockで隙間ができる原因について

bah91929

総合スコア19

CSS3

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1グッド

0クリップ

投稿2018/11/01 03:23

ご回答者様

いつもお世話になっております。

「CSSのinline-blockで隙間ができる原因」について教えていただけますと幸いです。

display:inline-blockで要素を並べると余計な隙間が出来てしまいます。

次のサイトなどを見ると、コードの改行が半角スペースと認識されて隙間ができるとの事でした。
https://infoteck-life.com/a0079-css-inline-block-gap/
http://dcs-webdesign.lolipop.jp/html/490.html

これはdisplay:inline-blockだけの特別な現象として「暗記」しとけば良いのかなと考えましたが、
img要素でも改行すると半角スペースとして隙間ができるようです。

なぜコードの改行で隙間ができるのか理屈を教えていただけますと幸いです。

また、インライン要素ではすべて隙間ができるのでしょうか?

暗記ではなく、理屈を理解したほうが良いと思い、ご質問させていただきました。

お手数ではございますが、ご回答の程何卒よろしくお願いします。

Higemura👍を押しています

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

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

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

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

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

guest

回答2

0

ベストアンサー

inline-block要素の仕様によるものなのですがinline-blockだとHTML上での改行にスペースを保持してしまうという性質があります。
なぜそんな仕様なのかと問われるとW3Cのに問い合わせるしかありませんが、HTMLソースをマウスで囲って見るとその理由がわかりやすいと思います。

例えば以下のようなulリストがあったとします↓

<ul class="list1"> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> <li>リスト4</li> <li>リスト5</li> </ul>

リスト1 の行をマウスで囲ってみると </li>の端っこ まで選択できると思います。
ulリスト

次にリスト1からリスト2の行まで囲ってみてください。
改行すると空白が見える

するとリスト1の行の**</li>の右に空白**ができませんか?
このスペース分がinline-blockとinline要素で崩れる原因です。

普段HTMLコードはタグごとに改行して書くのが一般的だと思いますが、改行をするたびにこの 見えない空白 が発生しています。

しかし、divやpタグなどは崩れないで綺麗に表示されていますよね?

それはblock要素だからこの 見えない空白 を無視できていると考えてください。

なのでliタグがinlineやinline-blockの時は 見えない空白 を HTMLコードとして忠実に再現していることになります。
※imgタグもデフォルトがinline要素なので見えない空白の影響を受けて画像の下に隙間ができます。

その理由にHTMLタグを改行せずに記述すると見えない空白自体HTMLコードに存在しないので、崩れないで表示されるわけです。

<ul class="list1"> <li>リスト1</li><li>リスト2</li><li>リスト3</li><li>リスト4</li><li>リスト5</li> </ul>

改行なし

逆に言うとblock要素親要素いっぱいまで幅を確保できるので 見えない空白 を無視できる特殊な要素とも言えるかもしれません。

インライン要素とインラインブロック要素をまとめたデモがこちらです↓
https://codepen.io/Higemura/pen/zmgZNK

返答 liタグの左側のスペースはどうなるのか?

**"この部分"**が空白として認識されるか?と言うことですよね?

<ul class="list1"> "この部分"<li>リスト3</li> "この部分"<li>リスト3</li> "この部分"<li>リスト3</li> "この部分"<li>リスト3</li> "この部分"<li>リスト3</li> </ul>

これはHTMLやそれ以外のプログラム全般に言えることなのですが、
コードの行の左側はどんだけスペースを開けても空白と認識されません。

一般的に左側の空き部分は**"インデント"として認識されるので、ブラウザに出力されても"半角スペース"**のような扱いにはならないんです!

**"インデント"**がある理由はコードの可読性を高めるものとして実装します。
解答欄にはli行の左側に半角スペース2個入れています。「ulタグの中にliがあるんだよ〜」って意味ですね!

<ul class="list1"> "インデント"<li>リスト1</li>"空白" "インデント"<li>リスト2</li>"空白" "インデント"<li>リスト3</li>"空白" "インデント"<li>リスト4</li>"空白" "インデント"<li>リスト5</li>"空白" </ul>

なので"インデント"はソースコードに影響しないので

<li>リスト2</li>"空白""空白""空白"<li>リスト3</li>

のようにはならず、

<li>リスト2</li>"空白"<li>リスト3</li>

になっていると言うことになります!

投稿2018/11/01 04:14

編集2018/11/01 05:24
Higemura

総合スコア274

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

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

bah91929

2018/11/01 04:52

丁寧なご回答まことにありがとうございます!! すごく分かりやすくてびっくりしました! 1点質問なのですが、</li>の右に空白が出来ている表で、3行目の<li>の左にも(半角スペース2つ分くらい)空白ができているように見えるのですが、これは空白ではありませんか? もし空白なら2行目と3行目の<li>要素をdisplay:inline-blockで並べると半角スペース計3つ分の空白がブラウザで表示される気がしました。 重ねての質問で恐縮ですが、可能でしたがご回答よろしくお願いします。
Higemura

2018/11/01 05:21 編集

<li>タグの左側の空白がどう影響するか?ってことですよね? 解答欄の「liタグの左側のスペースはどうなるのか?」 に記述してみました!
bah91929

2018/11/01 05:25

迅速な対応に感謝します! 本当に丁寧で分かりやすい解説でHigemura様の人柄の良さが伝わってまいりました(^^) またお世話になるかもですが、引き続きよろしくお願いします。
Higemura

2018/11/01 05:28

いえいえ 笑 僕も書いてるうちに"空白"がいいのか"半角スペース"で説明した方がいいのか、ごちゃごちゃになってしまいました 笑 紛らわしい説明ですみません。。 "空白" = "半角スペース" って認識で大丈夫です!笑
bah91929

2018/11/01 05:30

はい!ありがとうございます(^^)
guest

0

なぜコードの改行で隙間ができるのか

inline-block等に限らずHTMLがそういうものだからです。
HTMLは改行を半角スペースとして扱うというだけですね。

インライン要素ではすべて隙間ができるのでしょうか?

「すべて」が何を指しているのかわかりませんが、
改行やスペースがあればできますね。

投稿2018/11/01 03:31

dice142

総合スコア5158

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

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

bah91929

2018/11/01 04:47

ご回答ありがとうございます。 HTMLが改行を半角スペースとして扱うというのがすごく分かりやすくて理解が深まりました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問