[解決済み】このinline-block要素はなぜ下に押されるのですか？

質問

以下は私のコードですが、私はこれを理解したいのです。 なぜ #firstDivは、すべてのブラウザで下方に押されています。私は本当に 理解する なぜ、何らかの方法で上方に引っ張るのではなく、下方に押されているのかという事実の内部動作。(そして、私は彼らのトップを揃える方法を知っています :))

そして、そのoverflow:hiddenが原因であることは分かっていますが、なぜそのdivを下方向に押しているのかは分かっていません。

body {
  width: 350px;
  margin: 0px auto;
}

#container {
  border: 15px solid orange;
}

#firstDiv {
  border: 10px solid brown;
  display: inline-block;
  width: 70px;
  overflow: hidden;
}

#secondDiv {
  border: 10px solid skyblue;
  float: left;
  width: 70px;
}

#thirdDiv {
  display: inline-block;
  border: 5px solid yellowgreen;
}

<div id="container">
  <div id="firstDiv">FIRST</div>
  <div id="secondDiv">SECOND</div>
  <div id="thirdDiv">THIRD
    <br>some more content<br> some more content
  </div>
</div>

http://jsfiddle.net/WGCyu/ .

解決方法は？

基本的に、あなたはコードに乱雑さを加えており、それがさらなる混乱を引き起こしているので、まず、本当の問題を理解する妨げとなる乱雑さを取り除くことを試みます。

まず最初に、何が本当の問題なのかを確認する必要があります。 それは、なぜ"なのかということです。 inline-block "要素が下に押し出されています。

あとは、それを理解した上で、まず雑念を取り除くことから始めます。

1 - 3つのdivに同じボーダー幅を与えてはどうでしょうか。 与えましょう。

2 - フローティング要素は、inline-block要素が下に押されることと関係があるのでしょうか？ いいえ、関係ありません。

では そのdivを完全に削除しました . そして、inline-block要素が下に押し出されるのと同じ動作を目の当たりにしています。

ここで、いくつかの 文学 ラインボックスのアイデアを把握し、それらが同じ行に並んでいる方法は、そこにあなたの質問の答えがあるので、慎重に最後の段落を読むesp。

inline-block'のベースラインは、通常のフローにおける最後のラインボックスのベースラインです。ただし、フロー内のラインボックスを持たないか、'overflow'プロパティに'visible'以外の計算値がある場合は、ベースラインがボトムマージンの端となります。

についてよくわからない場合は ベースライン ということで、簡単に説明します。

gjpqy以外の文字はベースライン上に書かれています。ベースラインとは、これらの文字のすぐ下にアンダーラインと同じように単純な水平線を引くと、それがベースラインとなりますが、もし同じ行にgjpqyの文字を書くと、これらの文字の下部がラインより下に落ちてしまいます。

つまり、'gjpqy'以外の文字は完全にベースラインより上に書かれており、これらの文字の一部はベースラインより下に書かれていると言える。

3 - ラインのベースラインはどこなのか、確認してみましょう。 私は ベースラインを示す数文字 を表示します。

4 - divの中にも文字を追加して、divの中のベースラインを見つけるのはどうでしょうか？ ほら。 ベースラインを明確にするためにdivに追加されたいくつかの文字 .

ベースラインについて理解できたら、次はインラインブロックのベースラインについての簡易版を読んでみましょう。

i) inline-blockのoverflowプロパティがvisibleに設定されている場合（デフォルトで設定されているので設定不要）。 その場合、そのベースラインは、その行を含むブロックのベースラインとなる。

ii) inline-block の overflow プロパティが OTHER THAN VISIBLE に設定されている場合。 その場合、その底部マージンは、ボックスを含む行のベースライン上にある。

• 1点目の詳細

現在 をもう一度見て、緑のdivで何が起こっているのか、その概念を明確にしてください。 . まだ何か混乱があるようなら では、緑の div の近くにさらに文字を追加して、包含ブロックのベースラインを確立しています。 で、緑のdivのベースラインが揃う。

さて、私は今、両者は同じベースラインを持っていると主張しているのですが？そうでしょう？

5 - では、それらを重ね合わせて、1つ1つが正しくフィットしているかどうか見てみましょう。 そこで、3つ目のdivに -left: 35px を持ってきました。 で、現在同じベースラインを持っているかどうかを確認します。 ?

これで、最初のポイントは証明されました。

• 2点目の詳細

さて、1点目の説明の後、2点目の説明はわかりやすく、overflowプロパティがvisible（hidden）以外に設定されている最初のdivは、その下のマージンが線の基準線上にあることがわかると思います。

さて、さらに説明するために、いくつかの実験をすることができます。

1. セット 最初の div の overflow:visible を削除する（または完全に削除する）。 .
2. 設定 second div overflow: visible 以外 .
3. 設定 両方の divs overflow: visible 以外 .

今、あなたの乱雑さを取り戻し、すべてがあなたに正常に見えるかどうかを確認します。

1. 持ってくる フロートしたdivを戻す (もちろん
   
   ボディの幅を少し広げる） 何の効果もないことがお分かりいただけると思います。
2. 同じように変な余白を復活させる .
3. 設定 質問で設定されたように、緑のdivをoverflow: visibleにします。 (このズレはボーダーの幅が1pxから5pxになったためで、もし 左マイナスを調整 問題ないことがおわかりいただけると思います)
4. 現在 を補助するために追加した文字を削除します。 理解する . (もちろん左のマイナスも削除)
5. 最後に ボディ幅の縮小 というのも、もはや広いものは必要ないからです。

そして今、私たちは元の場所に戻ってきました。

ご質問にお答えできたでしょうか。