謎の空白

問題

要素を並べた時に、なぜか期待していない空白ができることがある。

原因

いくつかの原因が複合的に現れている。

そもそもレイアウトで位置が指定されている。(top, left, right, bottom)

CSS ボックスモデルによるもの(デフォルトのスタイルによるもの)

padding によるもの

margin によるもの

body, h1 等には margin が設定されている。

border によるもの(透明なボーダーなど)

box-sizing の content-box 属性によるもの

空白文字、改行によるもの

ただのインデントや改行のつもりだが、そこにレンダリング対象となる空白が紛れ込んでいる。特に改行は分かりづらい。

埋め草として使われている文字(たいてい  )が入り込んだことによるもの

何らかの間隔によるもの

letter-spacing

word-spacing

border-spacing

フォントのデザインによるもの

ベースライン(baseline)の下部分(decender, ディセンダー)の空白によるもの

Meiryo はディセンダーがバカみたいにでかくなっている。フォントの設計ミス。(見やすくするために意図的のようだが)

フォントの上部分の空白によるもの(普通はあまりない)

複数のスクリプト(言語)が混ざると代理フォントが使われることがあるが、この判定にブレがあり、そのブレからサイズが狂うことがある。

アライメントによるもの

inline-block はデフォルトでベースラインに並んでしまう。(vertical-align: baseline がデフォルト)

意図しないスタイルの継承によるもの

html 要素、body 要素にもブラウザによって margin, padding が設定されている。

ドキュメントとクライアント領域に隙間がある

body 要素にはデフォルトの margin が設定されている。

デフォルト

https://gyazo.com/a94486af05e4da769ed94a7d4dc3b28e

body { margin:0; } 設定後

https://gyazo.com/8da7df8c222d0f8b3eee9b46c9ab0e71

line-height を 0 にする。

空白を生み出す可能性のある CSS

間接的に空白を生み出す可能性のある CSS

次の行との隙間、またはベースラインの下側が空くとされている。(本当のところはよく分からない)

Keyword

隙間,空白,間,空く

参考

関連