【初心者向けシリーズ】html隙間問題の確認箇所

htmlなぜか隙間が埋まらない時に確認したい備忘録

疲れ過ぎている時、眠い時、そもそも技術がない時期。必ずぶち当たる壁をぶち壊すための備忘録

その１.「cssリセットしてる？」

htmlはタグがものすごく個性的なので、サクッとそのまま使うことはなかなかできない。
基本装備でmarginやpaddingが入っていることが多いにあるのでそいつらを取ってあげることが、彼らと仲良くなる第一歩。でもタグの個性がちょっとまだよくわからないうちは下のように、使うタグ全てのmarginとpadding、ついでにbox-sizingも指定しとくととりあえずよくわからない隙間は開かない。

*,html,body,ul,li {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

その２.「改行してない？」

改行も１文字分の隙間が空くんですねー。もしよくわからない隙間が空いている場合は改行を無くしてみよう。

//before
<ul>
 <li>hoihoi</li>
 <li>hoihoi</li>
 <li>hoihoi</li>
</ul>

//after
<ul>
 <li>hoihoi</li><li>hoihoi</li><li>hoihoi</li>
</ul>

その3.「その画像、ちょっと上にあるんじゃない？」

画像あるあるです。いくつもの画像を縦に並べてると下に隙間が空いて「あれ、ちょっとまってmargin聞かせてないんだけど」と、なりがち。そういうときは大抵verticlal-alignが邪魔をしてるぞい。
基本が確かbaselineになってるから、bottomまでの隙間が見えてしまってるんだよね（あとで参考画像をはるよ）。だから、bottomに指定し直せばok。画像にかかわらずなんか下に隙間空いてるなってときは一旦試してみるべき。

//html
<img class="sample" src="haha.png">

//css
.sample {
 vertical-align: bottom;
}

まとめ

昔は隙間のせいであうあう言っていたなーと思いつつ。質問も多いなーと思いつつ。