HTMLとCSSは全く同じコードでもスペースの有無でブラウザでの表示が変わるのでしょうか？

Question

HTMLとCSSを勉強しているのですがHTMLとCSSのどちらも全く同じコードであるのに
実行すると教材に表示されている内容と自分のブラウザ上で表示される内容が変わって
しまいます。理由がわかる方教えて頂けませんか。スペースの有無で表示が変わるもの
でしょうか？　※教材の指定と同じようにブラウザはChromeを使用しております。
教材のChromeのバージョンはわからなかったのですが2017年4月頃に出版
されています。OSはどちらもWindows10です。
その教材では各セクションで完成形を公開しておりそのコードをこれも同じVisualStudioCodeで実行すると教材で表示されているものと同じ表示になります。
画像では具体的な違いがわかりづらいですが全体的な文字や余白が自分のコードだと
大きくなります。さらに画面の左右の余白が自分のコードでは反映されません。
外部参照が異なりますがそのCSSのコードは３枚目に載っています。

Comments

[takito]

教材のChromeはバージョン情報まで書かれていますか？

[macaron_xxx]

どこが変わっているのかを提示してください。

[Matuidi10]

ご指摘ありがとうございました。

[Matuidi10]

指摘内容を更新しました。

[macaron_xxx]

＞画像では具体的な違いがわかりづらいですが＜わかるように撮ってください。少なくとも違うんでしょ？

[Matuidi10]

わかりやすく訂正しました。

[macaron_xxx]

CSSはどこいったんですか…。

[Matuidi10]

本当に申し訳ないです。cssの画像も挿入しました。

[macaron_xxx]

HTMLに違いは全くないのですか？HTMLも載せてください。

Answer 1

HTMLにおいて言えば非推奨ですが全角空白なら全角空白で反映されます。
しかし、CSSの場合は反映されなくてもエラーを起こす可能性があるので基本は使わないほうがいいです。
(この答え方であっていますか？)

Comments

[Matuidi10]

回答ありがとうございます。エラーというのは具体的にどういった事でしょうか。
初心者で知識不足で申し訳ございません。

[退会済みユーザー]

https://codepen.io/yoshi0819/pen/WYPQYK
このようにエラー（ちょっと使い方が違う気がしますが...）が起きます。

Answer 2

スペースの有無で表示が変わるものでしょうか？

スペースが全角スペースだった場合、JavaScript以外の多くの言語ではスペースとしてではなく単なる文字として扱われますので、動きが変化します。

また、CSSのセレクタは.foo.barのように連続させるのと.foo .barのようにスペースを開けて並べるので意味が違います。

Comments

[Matuidi10]

回答ありがとうございます。指摘された内容を反映してもう一度確認してみたいと思います。

Answer 3

HTMLとCSSは全く同じコードでもスペースの有無でブラウザでの表示が変わるのでしょうか？

変わります。一般的には以下のとおりです。
###HTML
・全角は全てテキスト扱いで、「全角空白文字」として反映されます。
・半角は開始タグの左側はインデント扱いで反映されず、右側はテキスト扱いで、「半角空白文字」として反映されます。
（※連続する場合、最近のブラウザでは2つめ以上は無視されます。）

###CSS
・全角は反映して、場所により、セレクタやプロパティが無視されます。
・半角は、複数セレクタの場合は反映し、指定条件が変わります。プロパティや値の場合は、インデント扱いで、反映されません。

Answer 4

今更ですが・・・

href="https://maxcdn..."のlinkタグのURLの途中に改行が入ってるためbootstrapのCSSが適用されず表示が変わってしまっていると思われます。