質問: atom 1.28.2です。 cssの.box3でdisplay: inlineなのにブラウザ上では空白が出来ていません。 (ブラウザ上で言う赤のボックスです) webサイトで勉強しているのですが、そこでは以下のようになっています。 <コード> ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/6217d755ec2e16a547afc2be89cda6c1.png) <ブラウザ> ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/dbc068f1f540854f1e05ada3b72ab025.png) ``` CSSの練習 Box2 Box3 Box3 Box3 ``` ``` .box1{ background-color: orange; width: 200px; height: 200px; } .box2{ background-color: skyblue; width: 50%; height: 50%; } .box3{ background-color: tomato; display: inline; border: 1px solid black; } ``` <ブラウザ上> ![イメージ説明](https://teratail.storage.googleapis.com/uploads/contributed_images/9ede123147d80c177024487f96627e19.png) 上のように要素(Box3)がくっ付いてしまいます。 marginやinline-blockで空白を作れますが、教科書では空白が出来ていますた。なぜ、空白が出来ないのか知りたいです。
回答: CSSの基礎知識として、「デフォルトスタイルシート」と「ブラウザ毎のスタイル」があります。 また、ブラウザのバージョンやブラウザの種類毎にCSSの対応状況も違うという事も覚えておきましょう。 詳しくはGoogleで検索する事で沢山資料がが出てくると思いますので割愛します。 下記のリンク先でデフォルトスタイルシートで設定されている値や対応状況を調べる事が出来ますのでご参考までに。 【W3C】HTML 4のためのデフォルトスタイルシート ブラウザの対応状況を調べるサイト atom-kikiさんが上げているコードで隙間が出来る事は無いかと思います。 改行によって隙間が出来る場合が有りますが、ほとんどの場合それは意図しない隙間であり、隙間が出来た事を問題とします。 【追記】 従って、何故隙間があったり無かったりするのかの答えは「ブラウザ等環境によって変わるから」となります。 【追記ここまで】 ちなみに余談ですが、教科書で勉強中との事ですが、内容的に「横並びになる」「上下のmarginの設定が出来ない」などin-lineの特徴を記述してありませんか? その際は参考画像のままにならなければならないというわけではなく、横並びになっていて上下にmarginの設定をしても反映されないなどの特徴が確認出来れば成功として考えて良いかと思います。 参考画像はあくまでも参考画像とし、説明文の通りになるかを確認してサクサク進める事をお勧めします。 ご質問の内容で判断する限り、先は長いと思いますのでファイトなのです|ー゚) 【再追記】 ブラウザがchromeという事でエディタのプラグインなど特殊なブラウザでない事が分かったので追記です。 ※atom-kikiさんが質問の通り(改行など載せているコードそのまま)に記述している場合の答えです。 ``` Box3 Box3 Box3 Box3 Box3 Box3 ``` 変更前との違いは終了タグ(***>)の前のテキストの有無です。 主流ブラウザの場合タグの内外問わずインラインとくっ付いてるdiv要素(ブロックレベルなのに)をインラインと同じようにレンダリング(HTML文をブラウザで表示した場合の見た目に変える)していると思われます。 W3C HTML 4.01 Specification (ブラウザ側は予想です。眠いので参考ソースは見つけてないです。ごめんなさい。) よって答えは「教科書通りに記述していないから」ですね。 [余談その2] しかし、プラグインなどの特殊なブラウザ(レンダリングエンジン)によってはW3Cの仕様書に沿ったものもあるかもしれません。 ※仕様書では同じようにレンダリングされるべきだと記述してあるようです。(英語が苦手なので断定はしないでおきます(笑)) Appendix B: Performance, Implementation, and Design Notes なので、もし今後プラグインなどのブラウザを使用されるようになっても、最終検証の際は主流のブラウザを数種類使用されることをお勧めします。 私の場合は PC:IE chrome FireFox Android:chrome iPhone:safari iPad:safari を使用して検証しています。 仕様書って英語ばかりで難しいですが、どうしても気になる時は参考にするとスッキリしますよ|ー゚) それでは、ながながとなりましたが良いコーディングライフを!