inline-blockなのに縦に重なる

Question

ネットやこのサイトで検索をかけてみたものの、意外と自分と同じ悩みを投稿している人が見当たらなかったため、質問します。

inline-blockを入れているはずなのに、なぜか縦に重なります。
サイトの方は載せられませんが、イメージ図としては、このような感じです。

うまくいけば、一番上の見切れているブロックのように横並びになるはずなのですが…。

該当部分ではこういう感じのコードを書いているのですが、どうしてinline-blockなのに縦に重なるのでしょうか。

   .inline-block_test12 { /*なんでこれ縦に重なるんだ…*/
    display: inline-block;      /* インラインブロック要素にする */
    padding:  20px;             /* 余白指定 */
    height: 100px;              /* 高さ指定 */
}

<div class="inline-block_test12">
    <br><font color=#00a69a>あああ</font>
<br><img src="https://www.画像.jpg" alt="海の写真" title="空と海">
<br>ああああああああああ</div>
    
    <div class="inline-block_test12">
    <br><font color=#00a69a>あああああ</font>
    <br><img src="https://www.画像.jpg" alt="海の写真" title="空と海">
    <br>ああああ</div>

追記：html部分の<div class="inline-block_test12">を、<div class=".inline-block_test12">にすることで、重なりは解消されました。が、inline-blockが適用されません。

更に追記
別部分で

.container {
  display: inline-flex;
}

<div class="container">
テキスト
</div>

をやってみたところ、高さに差がありますが、横並びにできました。（画像はなし。ボックスはあり。）

ただ、これを上記の質問部分に入れてみたところ、少し右に行ったもののまだ重なったままです。

Comments

[marlboro_tata]

質問にあるコードで試してみましたが、「重なり」という点は再現ができませんでした。
https://codepen.io/ccc-labo/pen/NWqMvBO
もし、上記のcodepenの動きがほぼ思い通りであるならば、
ここに書かれていないコードが、影響を与えている可能性が高いかと存じます。

[AmiI]

例えばどんなコードが考えられますか？

[marlboro_tata]

>例えばどんなコードが考えられますか？
その質問にはとても答えにくいです。
うまくいかない時は、原因と思われるものを、ひとつひとつ試し、潰していく作業が必要ですが、ここに見えて与えられている情報は少なすぎて、私にとっては、答えられそうにありません。ごめんなさい。

[AmiI]

具体的にはどんな情報を書けばいいんでしょうか。

[marlboro_tata]

パッと思いつくのは、
・div.inline-block_test12 要素の親要素と適用されているCSSルール
・親要素の直前にある要素と適用されているCSSルール
・div.inline-block_test12 要素に適用されている他のCSSルール
・div.inline-block_test12 要素内にある要素に適用されているCSSルール
ぐらいでしょうか・・・・。

[AmiI]

>・div.inline-block_test12 要素の親要素と適用されているCSSルール
>・div.inline-block_test12 要素に適用されている他のCSSルール
・div.inline-block_test12 要素内にある要素に適用されているCSSルール

すみません、CSSルールというのは、上に記したコード以外に何かあるのでしょうか。

Answer 1

inline-block_test12にheight: 100pxを指定してるからです。

追記
私としてはこのような状態とみての解答ですが状況が異なっているということでしょうか。であれば、今の情報だけでは正確な修正案は出せません。

Comments

[AmiI]

どうしてそれを指定すると縦に重なってしまうのでしょうか。
あと、こちらを消去してみたものの、解決とはなりませんでした。

Answer 2

なんだか最近同じような質問があった気がするので、こちらからコピーしつつの回答です！
https://teratail.com/questions/246482#reply-357171

①インラインブロック要素の横幅が設定されていない

現在display: inline-block;で指定されていますが、
インラインブロック要素は、横幅が設定されていないと子要素に応じて自動で横幅が決まります。
なので、画像やらテキストやらが幅をとっていると自動で段落ちしてしまうんです。

今回の場合、2つで横並びなのでwidth: 50%を追記してやればうまく動くかな？

   .inline-block_test12 { 
    display: inline-block;      /* インラインブロック要素にする */
    padding:  20px;             /* 余白指定 */
    height: 100px;              /* 高さ指定 */
    width: 50%;
    box-sizing: border-box;     /* padding含めて幅50%にさせる */
}

②タグ間の改行で余分な空白が入っている

inline-block_test12の閉じタグと、その次のinline-block_test12の開始タグの間をくっつけてやれば空白はなくなります。

<div class="inline-block_test12">
    <br>
    <font color=#00a69a>あああ</font>
    <br><img src="https://www.画像.jpg" alt="海の写真"  title="空と海">
    <br>ああああああああああ
</div><div class="inline-block_test12"> <!-- 改行を消去 -->
    <br>
    <font color=#00a69a>あああああ</font>
    <br><img src="https://www.画像.jpg" alt="海の写真"  title="空と海">
    <br>ああああ
</div>

③そもそもインラインブロックで横並びさせるのが面倒

横並びさせる場合、display: flex;のほうが自由度が結構高いので、
フレックスボックスで横並びさせるのが手っ取り早いかもしれません。

.selector /* 親要素のセレクタを指定してください */
{
    display: flex;               /* フレックスボックス要素にする */
}

.inline-block_test12 { 
    /*display: inline-block;*/  /* いらないので、削除！ */
    padding:  20px;             /* 余白指定 */
    height: 100px;              /* 高さ指定 */
    width: 50%;
    box-sizing: border-box;     /* padding含めて幅50%にさせる */
}

Comments

[AmiI]

この場合、<div>は.inline-block_test12のままでよろしいでしょうか。

ちなみに、1,2番は試して見たものの、両方とも解決しませんでした。

[Yorrie]

質問でのコードのままだと、それで問題ございません！
実際にサイトへ組み込む際は多分class名も違うかと思うので、その場合はセレクターの指定を変更してください。

うーん、親要素に何らかの指定がなければ提示のコードでなんとかなるかと思ったんですが…
画像に`max-width: 100%`を指定していないと、親要素の幅に関係なく原寸が表示され続けたりとか…頂いた情報が少ないので、これ以上は推理になっちゃうかも。

inline-blockはちょっと使い勝手が悪いので、可能ならflexでの組み込みを推奨します。

[Yorrie]

flexの使い方について比較的わかりやすいかなーとおもったのはこちら。
https://webst8.com/blog/css-flex/

[AmiI]

すみません、とりあえずこのままコードを埋め込んだのですが、それでも縦になったままです。