ページをHTML5に対応するときは、DOCTYPE宣言として
<!DOCTYPE html>
を挿入します。しかし、これを挿入しただけで、ブラウザ上での解釈が部分的に変わり、レイアウトが崩れる場合があります。私の場合は余計な空白が発生してしまう部分が多数ありました。
スポンサーリンク原因となる部分
原因は、HTMLソースコード上での改行でした。改行を取れば実際はうまくいくことがあります。しかし、HTMLの見やすさのために、改行は必須です。
スポンサーリンク解決方法
現在使用可能だと確認している方法は２つあります。
- 空白が発生している部分の親要素のスタイルにfont-size:0px;を追加して、子要素それぞれにfont-sizeを手動で指定する。
- 改行部分をコメントアウトする。
１では、字の通り、文字の大きさを0にすることで、空白を消去します。
２では、改行をHTMLのコメントに含めることで対応します。つまり
<span>文章文章文章文章文章</span>
<span>文章文章文章文章文章</span>
という部分を
<span>文章文章文章文章文章</span><!--
--><span>文章文章文章文章文章</span>
とします。
開発者ツールでも、この空白の原因がわからず、かなり手間取ってしまいました。
誰かのお役に立てれば幸いです。
最後までお読みいただき、ありがとうございました。