css – インラインブロックを並べて画像を表示するとずれてしまう

タイトルの問題が発生してまたしても数十分ハマってしまったのでメモ
画面イメージとしてはこんな感じのやつを作ってました

001_display_samle

んで、右側に位置するインラインブロックの中に画像を表示したかったんですよ
実際入れてみたら↓のように表示されました

002_display_samle

かぁ~~~、なんで君はちょっと下に引っ込んじゃうの?恥ずかしがり屋さんなの!?

と、素人のわたしはインラインブロック君にイラついていましたが、彼が恥ずかしがり屋だったわけではなく、単にわたしが恥ずかしい奴だっただけでした。

 

サンプルソース

今回のサンプルはこんな感じです

.container {
    display: block;
    padding: 5px;
    width: 300px;
    height: 200px;
    border: solid 1px #000000;
}
.block_box {
    display: block;
    margin: 5px;
    width: 280px;
    height: 30px;
    border: solid 1px #8ae1e2;
}
.inline_block_box {
    display: inline-block;
    margin: 5px;
    width: 100px;
    height: 100px;
    border: solid 1px #8ae29a;
}
.image_star {
    width: 56.33333333px;
    height: 50px;
    background-image: url('./image/star.png');
    background-size: cover;
    content: "";
}
<div class="container">
    大枠のボックス
    <div class="block_box">ブロックレベルのボックス</div>
    <div class="inline_block_box">インラインブロックのボックス</div>
    <div class="inline_block_box"><div class="image_star"></div></div>
</div>

シンプルな内容だと思いますが、落とし穴はinline-block要素のvertical-alignです
インライン要素の高さを調整するプロパティですが、何も設定していないと基本baselineになっています

 

インラインブロックをデベロッパーツールで見てみます

003_developer_tool

vertical-alignがbaselineになってますね

 

結局なんでずれてしまうのか詳しい動きは正直あまりよくわかっていないのですが、vertical-alignがbaselineになっていると、左側インラインブロック内のテキストの下端と、右側インラインブロックの下端が一致するようです。

以下のような感じ(日本語だと分かりにくいので、英語にして、marginとかも消しました)

004_baseline

たぶん画像はbaselineを持っていないので、右側のinline-block要素自体の下端がbaselineとして認識され、左側のテキストがそれに合わせて上下調整される、といった感じでしょうか。詳しい方、おしえてください~

 

なんで、対処法としては、vertical-alignをtopに設定してやることで揃いました!

.inline_block_box {
    display: inline-block;
    margin: 5px;
    vertical-align: top;
    width: 100px;
    height: 100px;
    border: solid 1px #8ae29a;
}

005_display_samle

ふぅ、これでようやく恥ずかしいわたしの心にも平穏が訪れました~

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です