inlineがブラウザ上で空白なく表示されてしまう。する質問をすることでしか得られない、回答やアドバイスがある。inlineがブラウザ上で空白なく表示されてしまう。inlineなのにブラウザ上では空白が出来ていません。(ブラウザ上で言う赤のボックスです)webサイトで勉強しているのですが、そこでは以下のようになっています。black;}<ブラウザ上>上のように要素(Box3)がくっ付いてしまいます。marginやinline-blockで空白を作れますが、教科書では空白が出来ていますた。空白が出来ないのか知りたいです。attachmentクリップ0気になる質問をクリップするクリップした質問は、後からいつでもマイページで確認できます。クリップした質問に回答があった際、通知やメールを受け取ることができます。自分も答えを知りたい質問者以外のユーザにも役立つ評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。質問の評価を上げたことを取り消します低評価-評価を下げられる数の上限に達しました評価を下げることができません1日5回まで評価を下げられます1日に1ユーザに対して2回まで評価を下げられます質問の評価を下げるteratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。コメントをしてください。送信する質問の評価を下げる機能の利用条件この機能を利用するためには、以下の事項を行う必要があります。15:15現象確認したブラウザをご提示ください。htmlもcssも構文がおかしい状態で提示されています。実際のコードをきちんとコピペしてください現象確認したブラウザをご提示ください。htmlもcssも構文がおかしい状態で提示されています。編集mts10806さん、今回もありがとうございます。時間はかかってしまいましたが、指摘された通り書き直しました。mts10806さん、今回もありがとうございます。時間はかかってしまいましたが、指摘された通り書き直しました。件sort評価が高い順sort新着順sort古い順link+3display:inlineやdisplay:inline-blockでボックスを横並びにした場合に要素間に表示される隙間は、HTMLソースコード上の目に見えない「改行文字」が半角スペースとしてブラウザ上に表示されたものになります。HTML上で改行せずに一行で記述するとその隙間は表示されません。隙間があかないことの方がむしろおかしいと思われます。評価が高い回答ほどページの上位に表示されます。remove低評価0回答の評価を下げる下記のような回答は推奨されていません。評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。00:59W3CのHTML5仕様書などでは標準で改行が半角スペースになる旨の記述を見つける事が出来なかったのですが、根拠は何でしょうか?私の検索能力では参考文献にたどり着け無かったので誘導して頂けませんでしょうか?私の回答が間違いっていた場合、質問者様が混乱されると思いますので回答に削除依頼をかけます。お手数ですが宜しくお願い致します。明日明後日と出張ですので返信が遅れてしまいます事をご了承頂ければ幸いです。私の回答が間違いっていた場合、質問者様が混乱されると思いますので回答に削除依頼をかけます。お手数ですが宜しくお願い致します。明日明後日と出張ですので返信が遅れてしまいます事をご了承頂ければ幸いです。追記ですが、タグ外のスペースに関してのお話ですので、タグ間であればaKusanoさんの仰っている事は正しいと認識しています。追記ですが、タグ外のスペースに関してのお話ですので、タグ間であればaKusanoさんの仰っている事は正しいと認識しています。上記の[改行コード]がブラウザ上で半角スペースの隙間となって現れてくるという話なので、HTML5の仕様とは関係ない話だと思います。文献等は私も知りません。実際にブラウザで表示すれば改行コードが半角スペースとして隙間になってしまうのは事実なので経験則としてそのように認識しております。inline/inline-blockにすれば隙間が空くのが普通だと思いますよ。HTML5の仕様とは関係ない話だと思います。文献等は私も知りません。実際にブラウザで表示すれば改行コードが半角スペースとして隙間になってしまうのは事実なので経験則としてそのように認識しております。inline/inline-blockにすれば隙間が空くのが普通だと思いますよ。18:41回答ありがとうございます。返信遅くなり、申し訳ありませんでした。指摘されていた、一行記述はしていませんでした。スペースが空かないのか不思議ですが、haru_himeさんの仰る通り、気にせず進もうと思います。回答ありがとうございます。返信遅くなり、申し訳ありませんでした。指摘されていた、一行記述はしていませんでした。スペースが空かないのか不思議ですが、haru_himeさんの仰る通り、気にせず進もうと思います。編集aKusanoさん豆知識的な事が好きで個人的にこの問題に興味がありますので、質問を建ててみようと思います。ご回答ありがとうございました。検索した結果やはりブラウザの種類など環境によってHTML及びCSSの読み込み方が異なるようです。レンダリングエンジン」で資料が出てきます。豆知識的な事が好きで個人的にこの問題に興味がありますので、質問を建ててみようと思います。ご回答ありがとうございました。検索した結果やはりブラウザの種類など環境によってHTML及びCSSの読み込み方が異なるようです。レンダリングエンジン」で資料が出てきます。キャンセル完了するlinkcheckベストアンサー+2CSSの基礎知識として、「デフォルトスタイルシート」と「ブラウザ毎のスタイル」があります。ブラウザのバージョンやブラウザの種類毎にCSSの対応状況も違うという事も覚えておきましょう。詳しくはGoogleで検索する事で沢山資料がが出てくると思いますので割愛します。下記のリンク先でデフォルトスタイルシートで設定されている値や対応状況を調べる事が出来ますのでご参考までに。4のためのデフォルトスタイルシートブラウザの対応状況を調べるサイトatom-kikiさんが上げているコードで隙間が出来る事は無いかと思います。改行によって隙間が出来る場合が有りますが、ほとんどの場合それは意図しない隙間であり、隙間が出来た事を問題とします。従って、何故隙間があったり無かったりするのかの答えは「ブラウザ等環境によって変わるから」となります。【追記ここまで】ちなみに余談ですが、教科書で勉強中との事ですが、内容的に「横並びになる」「上下のmarginの設定が出来ない」などin-lineの特徴を記述してありませんか?その際は参考画像のままにならなければならないというわけではなく、横並びになっていて上下にmarginの設定をしても反映されないなどの特徴が確認出来れば成功として考えて良いかと思います。参考画像はあくまでも参考画像とし、説明文の通りになるかを確認してサクサク進める事をお勧めします。ご質問の内容で判断する限り、先は長いと思いますのでファイトなのです|ー゚)【再追記】ブラウザがchromeという事でエディタのプラグインなど特殊なブラウザでない事が分かったので追記です。※atom-kikiさんが質問の通り(改行など載せているコードそのまま)に記述している場合の答えです。class="box3">Box3</div>変更前との違いは終了タグ(</***>)の前のテキストの有無です。主流ブラウザの場合タグの内外問わずインラインとくっ付いてるdiv要素(ブロックレベルなのに)をインラインと同じようにレンダリング(HTML文をブラウザで表示した場合の見た目に変える)していると思われます。Specification(ブラウザ側は予想です。眠いので参考ソースは見つけてないです。)よって答えは「教科書通りに記述していないから」ですね。[余談その2]しかし、プラグインなどの特殊なブラウザ(レンダリングエンジン)によってはW3Cの仕様書に沿ったものもあるかもしれません。※仕様書では同じようにレンダリングされるべきだと記述してあるようです。Notesなので、もし今後プラグインなどのブラウザを使用されるようになっても、最終検証の際は主流のブラウザを数種類使用されることをお勧めします。使用して検証しています。評価が高い回答ほどページの上位に表示されます。remove低評価0回答の評価を下げる下記のような回答は推奨されていません。評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。18:37お早い回答ありがとうございます。返信遅れてしまいすいませんでした。ブラウザはwebサイトと同じChromeでやっています。違うと不安で前に進みません。ありがとうございます。お早い回答ありがとうございます。返信遅れてしまいすいませんでした。ブラウザはwebサイトと同じChromeでやっています。違うと不安で前に進みません。ありがとうございます。23:37お気持ち分かります。私も気になる派なのでなかなか勉強が進みません(笑)私の場合趣味でのんびりコーディングやっていますので個人的な興味で調べたりしていますが、お仕事や学校での勉強であればサクサク進めた方が最終目標にはやく進めると思いますのでお勧めです。