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

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

ただいまの
回答率

90.51%

  • CSS

    5813questions

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

  • HTML5

    4030questions

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

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 188

atom-kiki

score 27

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>
.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;
}

<ブラウザ上>
イメージ説明

上のように要素(Box3)がくっ付いてしまいます。
marginやinline-blockで空白を作れますが、教科書では空白が出来ていますた。なぜ、空白が出来ないのか知りたいです。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • mts10806

    2018/07/22 15:15

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

    キャンセル

  • mts10806

    2018/07/22 15:17

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

    キャンセル

  • atom-kiki

    2018/07/22 16:53 編集

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

    キャンセル

回答 2

+3

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/07/25 00:59

    W3CのHTML5仕様書などでは標準で改行が半角スペースになる旨の記述を見つける事が出来なかったのですが、根拠は何でしょうか?

    私の検索能力では参考文献にたどり着け無かったので誘導して頂けませんでしょうか?

    私の回答が間違いっていた場合、質問者様が混乱されると思いますので回答に削除依頼をかけます。
    お手数ですが宜しくお願い致します。
    なお、明日明後日と出張ですので返信が遅れてしまいます事をご了承頂ければ幸いです。

    キャンセル

  • 2018/07/25 01:13 編集

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

    キャンセル

  • 2018/07/25 10:00

    <div>……</div>[改行コード]
    <div>……</div>[改行コード]

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

    キャンセル

  • 2018/07/25 18:41

    回答ありがとうございます。返信遅くなり、申し訳ありませんでした。

    指摘されていた、一行記述はしていませんでした。
    なぜスペースが空かないのか不思議ですが、haru_himeさんの仰る通り、気にせず進もうと思います。

    キャンセル

  • 2018/07/26 22:23 編集

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

    キャンセル

checkベストアンサー

+2

CSSの基礎知識として、「デフォルトスタイルシート」と「ブラウザ毎のスタイル」があります。
また、ブラウザのバージョンやブラウザの種類毎にCSSの対応状況も違うという事も覚えておきましょう。
詳しくはGoogleで検索する事で沢山資料がが出てくると思いますので割愛します。

下記のリンク先でデフォルトスタイルシートで設定されている値や対応状況を調べる事が出来ますのでご参考までに。
【W3C】HTML 4のためのデフォルトスタイルシート
ブラウザの対応状況を調べるサイト

atom-kikiさんが上げているコードで隙間が出来る事は無いかと思います。
改行によって隙間が出来る場合が有りますが、ほとんどの場合それは意図しない隙間であり、隙間が出来た事を問題とします。

【追記】
従って、何故隙間があったり無かったりするのかの答えは「ブラウザ等環境によって変わるから」となります。
【追記ここまで】

ちなみに余談ですが、教科書で勉強中との事ですが、内容的に「横並びになる」「上下のmarginの設定が出来ない」などin-lineの特徴を記述してありませんか?
その際は参考画像のままにならなければならないというわけではなく、横並びになっていて上下にmarginの設定をしても反映されないなどの特徴が確認出来れば成功として考えて良いかと思います。
参考画像はあくまでも参考画像とし、説明文の通りになるかを確認してサクサク進める事をお勧めします。
ご質問の内容で判断する限り、先は長いと思いますのでファイトなのです|ー゚)

【再追記】
ブラウザがchromeという事でエディタのプラグインなど特殊なブラウザでない事が分かったので追記です。

※atom-kikiさんが質問の通り(改行など載せているコードそのまま)に記述している場合の答えです。

<!--変更前-->
<div class="box3">
  Box3
</div>
<div class="box3">
  Box3
</div>
<div class="box3">
  Box3
</div>

<!--変更後-->
<div class="box3">Box3</div>
<div class="box3">Box3</div>
<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/25 18:37

    お早い回答ありがとうございます。
    返信遅れてしまいすいませんでした。

    ブラウザはwebサイトと同じChromeでやっています。

    余談参考になります。
    少しでも違うと不安で前に進みません。。。
    直さないとですよね。。ありがとうございます。

    キャンセル

  • 2018/07/26 23:37

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

    キャンセル

  • 2018/07/27 19:59

    あ、私もほぼ趣味です。笑

    私の場合、続けることが今の目標です。笑

    キャンセル

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

  • ただいまの回答率 90.51%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • CSS

    5813questions

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

  • HTML5

    4030questions

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