コーディング中に起きる予期せぬ余白について
WEBサイトやLPを制作していると、予期せずスペースや余白が生まれることがあります。
すぐに解決できればいいのですが、様々な原因が考えらえれ時間がかかることがよくありました。
その為、余白が生まれやすい原因を一覧にしてチェックしていけば大抵は解決できるようにしました。
余白の原因が突き止められない時は是非ご覧ください。
※このページの内容をチェックしても対応できない場合は連絡をもらえると有難いです。調査して解決できればと思います。
padding, marginによる余白
原因
ブラウザ（Chrome, Safari, Firefoxなど）ではデフォルトでpadding, marginが設定されています。
それを解除せずにコーディングを始めてしまうと予期しない余白が出来てしまう可能性があります。
解決策
リセットCSS、ノーマライズCSSを使用してみてください。
上記を使用すればある程度、想定しない余白が生まれることを防げます。
clearfixなどの疑似要素による余白
clearfixとはfloatを利用した際、float要素の高さを認識する為にfloatをクリアする対応方法のことです。
原因
疑似要素のcontentに「’.’」を指定していることが原因です。
以前までNetscapeというブラウザ対応の為「’.’」を指定していたのですが、現在は利用されていないブラウザの為対応不要です。
解決策
「’.’」を「’ '」の半角スペースに変更すると余白がなくなります。
position:absoluteを指定した要素による余白
原因
rightの値をマイナスにした際、画面よりはみ出ていると発生します。
解決策
デベロッパーツールでposition:absoluteを指定した要素を消して余白がなくなるかチェックし、なくなるのであればrightの値などを調整してください。
なくならないのであれば、原因は別の箇所にありそうです。
子要素のmargin-top, bottomによる余白
原因
子要素のmarginは親要素が認識できない場合があります。
<ul>の中の<li>にmargin-bottomを指定していると最後の<li>のmargin-bottomが親要素に認識されず、想定していないデザインになる 等があります。
解決策
上記の場合は<li>のlast-childにmargin-bottom:0を与えると解決します。
基本的には親要素にpaddingを指定し余白を与え、子要素は必要最低限のプロパティで構成するべきかと思います。
transition:translateを指定した要素による余白
原因
left: 50%; transition:translateX(-50%);で中央揃えなどを実現した場合、一度left:50%にずれた位置に余白が生まれることがあります。
解決策
・right:-50%; transition:translateX(50%);で左にずらしてから中央寄せすると解決します。
（左にはみ出た要素はoverflow:hiddenのような感じになり余白は生まれません）
・中央寄せをflexなど他の方法で対応する方法もあります。
display:inline-blockでの横並びによる余白
原因
エディターで記述したマークアップの改行をブラウザは認識して余白に変換します。
要はブラウザの仕様です。
解決策
親要素にfont-size:0;を指定してinline-block要素に正しいfont-sizeを指定すると解決します。
または子要素にletter-spacing:0を指定し親要素のletter-spacingで隙間を消す方法もあります。
button要素のfont-sizeによる余白
button要素の親要素に余白ができることがある
原因
不明
解決策
親要素にfont-size:0を指定すると解決します。
line-hightによる余白
原因
line-htighに1.5など設定していて、flexで画像などと並べる場合、line-hight分の余白が発生します。
解決策
テキストがない場合はline-hight:normalか0にします。
テキストが1行の場合、line-hight:1にします。
テキストが複数行の場合、親要素はline-hight:1にし子要素は任意の値を設定すると解決します。
ie固有のバグによる余白
flex-direction: collumnで下に余白が出来る
原因
IEのバグ
解決策
子要素にmin-height:0;を指定すると解決します。
游ゴシック・游明朝で下に余白が出来る
原因
IEのバグ
解決策
対応不可です。
もし解決策を知っている方がいらっしゃったらご教授いただけるととても嬉しいです。
img要素の下の余白
原因
インライン要素に適用できるプロパティでvertical-alignというものがあります。
要素の上下の位置を指定できるプロパティで、初期値はbaselineになります。
baselineとはアルファベットの下線の位置のことで、
「gjpqy」のように下線より下部分がimg要素にとっては余白となってしまいます。
解決策
img要素のvertical-alignをbaseline以外のものにすると解決します。
（top,middle,bottomなど）
番外編
逆にmarginが効かない場合
原因
余白をmarginで取っているときに、たまに遭遇します。
これは上下の要素にそれぞれmargin-bottom,margin-topを指定して余白を取った際、marginの相殺が起こってしまい、片側のmarginが無効になってしまいます。
解決策
片側のmarginで余白を取りましょう。
もしくは片方をpaddingで余白を取るようにすると解決します。