HTML5のDOCTYPE宣言を挿入すると変なところに空白が発生する


ページをHTML5に対応するときは、DOCTYPE宣言として

<!DOCTYPE html>

を挿入します。しかし、これを挿入しただけで、ブラウザ上での解釈が部分的に変わり、レイアウトが崩れる場合があります。私の場合は余計な空白が発生してしまう部分が多数ありました。

スポンサーリンク

原因となる部分

原因は、HTMLソースコード上での改行でした。改行を取れば実際はうまくいくことがあります。しかし、HTMLの見やすさのために、改行は必須です。

スポンサーリンク

解決方法

現在使用可能だと確認している方法は2つあります。

  1. 空白が発生している部分の親要素のスタイルにfont-size:0px;を追加して、子要素それぞれにfont-sizeを手動で指定する。
  2. 改行部分をコメントアウトする。

1では、字の通り、文字の大きさを0にすることで、空白を消去します。

2では、改行をHTMLのコメントに含めることで対応します。つまり

<span>文章文章文章文章文章</span>
<span>文章文章文章文章文章</span>

という部分を

<span>文章文章文章文章文章</span><!--
--><span>文章文章文章文章文章</span>

とします。

開発者ツールでも、この空白の原因がわからず、かなり手間取ってしまいました。

誰かのお役に立てれば幸いです。

最後までお読みいただき、ありがとうございました。

last

フォローする