ホームへ

【CSS】inline-blockが効かない・横並びにならない原因と解決方法4選

「display:inline-blockで横並びさせたいのに改行されて横並びにならない!」

display:inline-blockが効かない・横並びにならない原因と解決方法を4種類解説します。

【原因1】要素の後に隙間がある

下記はdisplay:inline-blockを指定した上でwidth:50%にしたものです。

ちょうど半分で横並びになるはずが横並びになっていません。

inline-block
inline-block
<style>
.example{
    background: #f2f2f2;
    border: 1px solid #999;
}
.example div{
    display: inline-block;
    border: 1px solid #999;
    width: 50%;
    padding: 10px;
    background: #bdeaea;
    box-sizing: border-box;
}
</style>
    
<div class="example">
    <div>inline-block</div>
    <div>inline-block</div>
</div>

display:inline-blockが指定された要素のhtmlソースが改行されているとその要素の後ろに隙間ができます

なお、marginではないためCSS margin:0ではなくなりません。

【解決方法1】htmlソースの兄弟要素の隙間を空けない

inline-block
inline-block

下記のように兄弟要素を改行せずくっつけてしまうと横並びになります。

html

<div class="example">
    <div>inline-block</div><div>inline-block</div>
</div>

縦に並べたいなら下記のように改行とインデントをコメントアウトしてもOKです。

<div class="example">
    <div>inline-block</div><!--
    --><div>inline-block</div>
</div>

【解決方法2】親要素にletter-spacing: -1em

要素の後にできる1文字分の隙間は「letter-spacing: -1em」で打ち消すことができます。

inline-block
inline-block
<style>
.example2{
    /*コレ*/letter-spacing: -1em;
    background: #f2f2f2;
    border: 1px solid #999;
}
.example2 div{
    /*戻す*/letter-spacing: 0;
    display: inline-block;
    border: 1px solid #999;
    width: 50%;
    padding: 10px;
    background: #bdeaea;
    box-sizing: border-box;
}
</style>
    
<div class="example2">
    <div>inline-block</div>
    <div>inline-block</div>
</div>

letter-spacingは文字の間隔を調整するCSSです。

これは親要素に指定することで子孫の文字間隔に影響させます。

孫にも継承されるため、子要素にletter-spacingを指定し直す必要があります。

【解決方法3】display:flexで横並べする

そもそもdisplay:inline-blockはレイアウト調整に向いていません。

上記のhtmlをいじる方法もletter-spacing: -1emを指定する方法も、解決できるとはいえ強引であり不自然です。

display:flexはレイアウト調整に長けたCSSです。

こちらを使って横並べのレイアウトを作ることをオススメします。

【原因2】親の幅を超えている

下記は「width: 50%」と指定していますが、「padding: 10px」と「border: 1px」も指定しています。

通常paddingとborderはwidthに含まれません

これにより2つの幅の合計が100%を超えます。

inline-block
inline-block
<style>
.example3{
    background: #f2f2f2;
    border: 1px solid #999;
}
.example3 div{
    display: inline-block;
    border: 1px solid #999;
    width: 50%;
    padding: 10px;
    background: #bdeaea;
}
</style>
    
<div class="example3">
    <div>inline-block</div><div>inline-block</div>
</div>

「display: inline-block」を指定している要素は親要素の幅を超えない限り横並びしますが、超えると改行されます。

よって横並びならない状態になります。

【解決方法】box-sizing: border-boxを指定

box-sizing: border-boxはwidthをpaddingとborderを含めたサイズにするCSSです。

これで「width: 50%」と指定しても親の幅を超えなくなるため横並びになります。

inline-block
inline-block
<style>
.example4{
    background: #f2f2f2;
    border: 1px solid #999;
}
.example4 div{
    /*コレ*/box-sizing: border-box;
    display: inline-block;
    border: 1px solid #999;
    width: 50%;
    padding: 10px;
    background: #bdeaea;
}
</style>
    
<div class="example4">
    <div>inline-block</div><div>inline-block</div>
</div>

【原因3】前後がブロック要素

inline-blockは確かに横並びしますが、それは前後の要素がinline-blockまたはインライン要素であればです。

前後がブロック要素であればその横に並ぶことはできません。

inline-block
block
<style>
.example5{
    background: #f2f2f2;
    border: 1px solid #999;
}
.example5 div{
    border: 1px solid #999;
    width: 50%;
    padding: 10px;
    background: #bdeaea;
    box-sizing: border-box;
}
.example5 div:first-child{
    display: inline-block;
}
</style>
    
<div class="example5">
    <div>inline-block</div><div>block</div>
</div>

【解決方法】横並びさせる要素すべてをinline-blockにする

inline-blockおよびインライン要素同士が横並びします。

inline-block
inline-block
<style>
.example6{
    background: #f2f2f2;
    border: 1px solid #999;
}
.example6 div{
    /*コレ*/display: inline-block;
    border: 1px solid #999;
    width: 50%;
    padding: 10px;
    background: #bdeaea;
    box-sizing: border-box;
}
</style>
    
<div class="example6">
    <div>inline-block</div><div>inline-block</div>
</div>

【原因4】display:inline-blockを親に指定している

display:flexは親要素に指定し、子要素が横並びします。

これと同様にdisplay:inline-blockを親に指定しても横並びにはなりません。

【解決方法】横並びさせたい要素自身に指定

display:inline-blockは横並びさせたい要素自身に指定します。

ややこしいので注意しましょう。

【その他】ケアレスミス

CSSのスペルや記号を間違えている、優先順位が負けているなどの原因も考えられます。

下記を参考に見直してみてください。

【まとめ】inline-blockで横並びにならない原因と解決方法

【原因1】要素の後に隙間がある

htmlソースの兄弟要素の隙間を空けない

親要素にletter-spacing: -1em

【原因2】親の幅を超えている

box-sizing: border-boxを指定

【原因3】前後がブロック要素

横並びさせる要素すべてをinline-blockにする

【原因4】display:inline-blockを親に指定している

横並びさせたい要素自身に指定

以上、display:inline-blockが効かない・横並びにならない原因と解決方法4選でした。

マンガで読める関連記事