質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

2990閲覧

display: inlineがブラウザ上で空白なく表示されてしまう。

退会済みユーザー

退会済みユーザー

総合スコア0

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/07/22 05:54

編集2018/07/22 07:50

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で空白を作れますが、教科書では空白が出来ていますた。なぜ、空白が出来ないのか知りたいです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2018/07/22 06:15

現象確認したブラウザをご提示ください。またhtmlもcssも構文がおかしい状態で提示されています。実際のコードをきちんとコピペしてください
m.ts10806

2018/07/22 06:17

念のためborderを1pxで入れて各divの距離感を確かめてみてください
退会済みユーザー

退会済みユーザー

2018/07/22 07:53 編集

mts10806さん、今回もありがとうございます。時間はかかってしまいましたが、指摘された通り書き直しました。よろしくお願いします。
guest

回答2

0

display:inlinedisplay:inline-blockでボックスを横並びにした場合に要素間に表示される隙間は、
HTMLソースコード上の目に見えない「改行文字」が半角スペースとしてブラウザ上に表示されたものになります。
HTML上で改行せずに一行で記述するとその隙間は表示されません。

なので、ご提示のコードでは半角スペース分の隙間が空くのが正常な挙動で、
隙間があかないことの方がむしろおかしいと思われます。
teratailに記載したコードではbox3のdivを改行して記述しているけれど、
実際には改行しないで一行で記述していたりしてませんか?

投稿2018/07/24 04:31

aKusano

総合スコア3763

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/07/24 15:59

W3CのHTML5仕様書などでは標準で改行が半角スペースになる旨の記述を見つける事が出来なかったのですが、根拠は何でしょうか? 私の検索能力では参考文献にたどり着け無かったので誘導して頂けませんでしょうか? 私の回答が間違いっていた場合、質問者様が混乱されると思いますので回答に削除依頼をかけます。 お手数ですが宜しくお願い致します。 なお、明日明後日と出張ですので返信が遅れてしまいます事をご了承頂ければ幸いです。
退会済みユーザー

退会済みユーザー

2018/07/24 16:15 編集

追記ですが、タグ外のスペースに関してのお話ですので、タグ間であればaKusanoさんの仰っている事は正しいと認識しています。
aKusano

2018/07/25 01:00

<div>……</div>[改行コード] <div>……</div>[改行コード] ↑ 上記の[改行コード]がブラウザ上で半角スペースの隙間となって現れてくるという話なので、 HTML5の仕様とは関係ない話だと思います。文献等は私も知りません。ただ、実際にブラウザで表示すれば改行コードが半角スペースとして隙間になってしまうのは事実なので経験則としてそのように認識しております。 inline/inline-blockで横並びにした時のこの隙間を消す方法がネット上にはいくつも紹介されていますし、他に何もせず、普通に改行してソース書いてCSSでdisplay: inline/inline-blockにすれば隙間が空くのが普通だと思いますよ。
退会済みユーザー

退会済みユーザー

2018/07/25 09:41

回答ありがとうございます。返信遅くなり、申し訳ありませんでした。 指摘されていた、一行記述はしていませんでした。 なぜスペースが空かないのか不思議ですが、haru_himeさんの仰る通り、気にせず進もうと思います。
退会済みユーザー

退会済みユーザー

2018/07/26 15:16 編集

aKusanoさん 豆知識的な事が好きで個人的にこの問題に興味がありますので、質問を建ててみようと思います。 ご回答ありがとうございました。 【追記】 自力で解決しました。検索した結果やはりブラウザの種類など環境によってHTML及びCSSの読み込み方が異なるようです。詳しくは「ブラウザ レンダリングエンジン」で資料が出てきます。ご参考までに。
guest

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
(ブラウザ側は予想です。眠いので参考ソースは見つけてないです。ごめんなさい。)

よって答えは「教科書通りに記述していないから」ですね。

[余談その2]
しかし、プラグインなどの特殊なブラウザ(レンダリングエンジン)によっては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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/07/25 09:37

お早い回答ありがとうございます。 返信遅れてしまいすいませんでした。 ブラウザはwebサイトと同じChromeでやっています。 余談参考になります。 少しでも違うと不安で前に進みません。。。 直さないとですよね。。ありがとうございます。
退会済みユーザー

退会済みユーザー

2018/07/26 14:37

お気持ち分かります。 スッキリしませんよね。私も気になる派なのでなかなか勉強が進みません(笑) 私の場合趣味でのんびりコーディングやっていますので個人的な興味で調べたりしていますが、お仕事や学校での勉強であればサクサク進めた方が最終目標にはやく進めると思いますのでお勧めです。
退会済みユーザー

退会済みユーザー

2018/07/27 10:59

あ、私もほぼ趣味です。笑 私の場合、続けることが今の目標です。笑
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問