質問: HTMLとCSSを勉強しているのですがHTMLとCSSのどちらも全く同じコードであるのに 実行すると教材に表示されている内容と自分のブラウザ上で表示される内容が変わって しまいます。理由がわかる方教えて頂けませんか。スペースの有無で表示が変わるもの でしょうか? ※教材の指定と同じようにブラウザはChromeを使用しております。 教材のChromeのバージョンはわからなかったのですが2017年4月頃に出版 されています。OSはどちらもWindows10です。 その教材では各セクションで完成形を公開しておりそのコードをこれも同じVisualStudioCodeで実行すると教材で表示されているものと同じ表示になります。 画像では具体的な違いがわかりづらいですが全体的な文字や余白が自分のコードだと 大きくなります。さらに画面の左右の余白が自分のコードでは反映されません。 外部参照が異なりますがそのCSSのコードは3枚目に載っています。 ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/73a7bba64185b1716fbb6c22dfa74a52.png) ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/1251f2bbc07039ebeb0cd8632d813108.png) ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/edf9071a0b342dfc5dafff10d9e05b94.gif) ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/aae71860dd6110ac8a6b57dd098f4082.png) ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/360b05361bea1921c45a3b3b87dc07d9.png) ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/5857c84da36b74dd9c7564e7da09d25a.png)
回答: > > HTMLとCSSは全く同じコードでもスペースの有無でブラウザでの表示が変わるのでしょうか? > > > 変わります。一般的には以下のとおりです。 ### HTML ・全角は全てテキスト扱いで、「全角空白文字」として反映されます。 ・半角は開始タグの左側はインデント扱いで反映されず、右側はテキスト扱いで、「半角空白文字」として反映されます。 (※連続する場合、最近のブラウザでは2つめ以上は無視されます。) ### CSS ・全角は反映して、場所により、セレクタやプロパティが無視されます。 ・半角は、複数セレクタの場合は反映し、指定条件が変わります。プロパティや値の場合は、インデント扱いで、反映されません。