Q&A
現象確認したブラウザをご提示ください。またhtmlもcssも構文がおかしい状態で提示されています。実際のコードをきちんとコピペしてください
atom 1.28.2です。
cssの.box3でdisplay: inlineなのにブラウザ上では空白が出来ていません。
(ブラウザ上で言う赤のボックスです）
webサイトで勉強しているのですが、そこでは以下のようになっています。
<コード＞
<ブラウザ>
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>CSSの練習</title> <link rel="stylesheet" href="css/styles.css"> </head> <body> <div class="box1"> <div class="box2"> Box2 </div> </div> <div class="box3"> Box3 </div> <div class="box3"> Box3 </div> <div class="box3"> Box3 </div> </body> </html>
CSS
1.box1{ 2 background-color: orange; 3 width: 200px; 4 height: 200px; 5 6} 7.box2{ 8 background-color: skyblue; 9 width: 50%; 10 height: 50%; 11 12 13} 14.box3{ 15 background-color: tomato; 16 display: inline; 17 border: 1px solid black; 18}
<ブラウザ上>
上のように要素（Box3）がくっ付いてしまいます。
marginやinline-blockで空白を作れますが、教科書では空白が出来ていますた。なぜ、空白が出来ないのか知りたいです。
念のためborderを1pxで入れて各divの距離感を確かめてみてください
mts10806さん、今回もありがとうございます。時間はかかってしまいましたが、指摘された通り書き直しました。よろしくお願いします。
この質問の投稿者はすでに退会しているため、質問者からの返信がない点にご留意ください。
回答2件
0
display:inlineやdisplay:inline-blockでボックスを横並びにした場合に要素間に表示される隙間は、
HTMLソースコード上の目に見えない「改行文字」が半角スペースとしてブラウザ上に表示されたものになります。
HTML上で改行せずに一行で記述するとその隙間は表示されません。
なので、ご提示のコードでは半角スペース分の隙間が空くのが正常な挙動で、
隙間があかないことの方がむしろおかしいと思われます。
teratailに記載したコードではbox3のdivを改行して記述しているけれど、
実際には改行しないで一行で記述していたりしてませんか？
投稿2018/07/24 04:31
総合スコア3763
W3CのHTML５仕様書などでは標準で改行が半角スペースになる旨の記述を見つける事が出来なかったのですが、根拠は何でしょうか？
私の検索能力では参考文献にたどり着け無かったので誘導して頂けませんでしょうか？
私の回答が間違いっていた場合、質問者様が混乱されると思いますので回答に削除依頼をかけます。
お手数ですが宜しくお願い致します。
なお、明日明後日と出張ですので返信が遅れてしまいます事をご了承頂ければ幸いです。
追記ですが、タグ外のスペースに関してのお話ですので、タグ間であればaKusanoさんの仰っている事は正しいと認識しています。
<div>……</div>［改行コード］
<div>……</div>［改行コード］
↑
上記の［改行コード］がブラウザ上で半角スペースの隙間となって現れてくるという話なので、
HTML5の仕様とは関係ない話だと思います。文献等は私も知りません。ただ、実際にブラウザで表示すれば改行コードが半角スペースとして隙間になってしまうのは事実なので経験則としてそのように認識しております。
inline/inline-blockで横並びにした時のこの隙間を消す方法がネット上にはいくつも紹介されていますし、他に何もせず、普通に改行してソース書いてCSSでdisplay: inline/inline-blockにすれば隙間が空くのが普通だと思いますよ。
回答ありがとうございます。返信遅くなり、申し訳ありませんでした。
指摘されていた、一行記述はしていませんでした。
なぜスペースが空かないのか不思議ですが、haru_himeさんの仰る通り、気にせず進もうと思います。
aKusanoさん
豆知識的な事が好きで個人的にこの問題に興味がありますので、質問を建ててみようと思います。
ご回答ありがとうございました。
【追記】
自力で解決しました。検索した結果やはりブラウザの種類など環境によってHTML及びCSSの読み込み方が異なるようです。詳しくは「ブラウザ レンダリングエンジン」で資料が出てきます。ご参考までに。
0
ベストアンサー
CSSの基礎知識として、「デフォルトスタイルシート」と「ブラウザ毎のスタイル」があります。
また、ブラウザのバージョンやブラウザの種類毎にCSSの対応状況も違うという事も覚えておきましょう。
詳しくはGoogleで検索する事で沢山資料がが出てくると思いますので割愛します。
下記のリンク先でデフォルトスタイルシートで設定されている値や対応状況を調べる事が出来ますのでご参考までに。
【W3C】HTML 4のためのデフォルトスタイルシート
ブラウザの対応状況を調べるサイト
atom-kikiさんが上げているコードで隙間が出来る事は無いかと思います。
改行によって隙間が出来る場合が有りますが、ほとんどの場合それは意図しない隙間であり、隙間が出来た事を問題とします。
【追記】
従って、何故隙間があったり無かったりするのかの答えは「ブラウザ等環境によって変わるから」となります。
【追記ここまで】
ちなみに余談ですが、教科書で勉強中との事ですが、内容的に「横並びになる」「上下のmarginの設定が出来ない」などin－lineの特徴を記述してありませんか？
その際は参考画像のままにならなければならないというわけではなく、横並びになっていて上下にmarginの設定をしても反映されないなどの特徴が確認出来れば成功として考えて良いかと思います。
参考画像はあくまでも参考画像とし、説明文の通りになるかを確認してサクサク進める事をお勧めします。
ご質問の内容で判断する限り、先は長いと思いますのでファイトなのです|ーﾟ)
【再追記】
ブラウザがchromeという事でエディタのプラグインなど特殊なブラウザでない事が分かったので追記です。
※atom-kikiさんが質問の通り（改行など載せているコードそのまま）に記述している場合の答えです。
HTML
1<!--変更前--> 2<div class="box3"> 3 Box3 4</div> 5<div class="box3"> 6 Box3 7</div> 8<div class="box3"> 9 Box3 10</div> 11 12<!--変更後--> 13<div class="box3">Box3</div> 14<div class="box3">Box3</div> 15<div class="box3">Box3</div>
変更前との違いは終了タグ（</***>）の前のテキストの有無です。
主流ブラウザの場合タグの内外問わずインラインとくっ付いてるdiv要素（ブロックレベルなのに）をインラインと同じようにレンダリング（HTML文をブラウザで表示した場合の見た目に変える）していると思われます。
W3C HTML 4.01 Specification
（ブラウザ側は予想です。眠いので参考ソースは見つけてないです。ごめんなさい。）
よって答えは「教科書通りに記述していないから」ですね。
［余談その２］
しかし、プラグインなどの特殊なブラウザ（レンダリングエンジン）によってはW3Cの仕様書に沿ったものもあるかもしれません。
※仕様書では同じようにレンダリングされるべきだと記述してあるようです。（英語が苦手なので断定はしないでおきます(笑)）
Appendix B: Performance, Implementation, and Design Notes
なので、もし今後プラグインなどのブラウザを使用されるようになっても、最終検証の際は主流のブラウザを数種類使用されることをお勧めします。
私の場合は
PC：IE chrome FireFox
Android：chrome
iPhone：safari
iPad：safari
を使用して検証しています。
仕様書って英語ばかりで難しいですが、どうしても気になる時は参考にするとスッキリしますよ|ーﾟ)
それでは、ながながとなりましたが良いコーディングライフを！
投稿2018/07/22 08:01
編集2018/07/26 16:49退会済みユーザー
総合スコア0
お早い回答ありがとうございます。
返信遅れてしまいすいませんでした。
ブラウザはwebサイトと同じChromeでやっています。
余談参考になります。
少しでも違うと不安で前に進みません。。。
直さないとですよね。。ありがとうございます。
お気持ち分かります。
スッキリしませんよね。私も気になる派なのでなかなか勉強が進みません(笑)
私の場合趣味でのんびりコーディングやっていますので個人的な興味で調べたりしていますが、お仕事や学校での勉強であればサクサク進めた方が最終目標にはやく進めると思いますのでお勧めです。
あ、私もほぼ趣味です。笑
私の場合、続けることが今の目標です。笑
この質問の投稿者はすでに退会しているため、質問者からの返信やベストアンサーの選定がない点にご留意ください。
あなたの回答
tips
プレビュー
