Q&A
ご回答ありがとうございます。
HTMLが改行を半角スペースとして扱うというのがすごく分かりやすくて理解が深まりました！
ご回答者様
いつもお世話になっております。
「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要素でも改行すると半角スペースとして隙間ができるようです。
なぜコードの改行で隙間ができるのか理屈を教えていただけますと幸いです。
また、インライン要素ではすべて隙間ができるのでしょうか？
暗記ではなく、理屈を理解したほうが良いと思い、ご質問させていただきました。
お手数ではございますが、ご回答の程何卒よろしくお願いします。
回答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>の端っこ まで選択できると思います。
次にリスト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
総合スコア274
0
なぜコードの改行で隙間ができるのか
inline-block等に限らずHTMLがそういうものだからです。
HTMLは改行を半角スペースとして扱うというだけですね。
インライン要素ではすべて隙間ができるのでしょうか？
「すべて」が何を指しているのかわかりませんが、
改行やスペースがあればできますね。
投稿2018/11/01 03:31
総合スコア5158
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/11/01 04:52
2018/11/01 05:21 編集
2018/11/01 05:25
2018/11/01 05:28
2018/11/01 05:30