CSSのinline-blockとは？inlineとの違いについても解説
display: inline-block値
display: inlineとの主な違いは、display: inline-blockでは要素の幅と高さを設定できることです。
また、display: inline-blockでは上下のマージン/パディングが考慮されますが、display: inlineでは考慮されません。
display: blockと比較すると、主な違いは、display: inline-blockは要素の後に改行を追加しないため、要素を他の要素の隣に配置できることです。
次の例は、display: inline、display: inline-block、display: blockのさまざまな動作を示しています。
例
span.a {
display: inline; /* spanタグのデフォルト値 */
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.b {
display: inline-block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
span.c {
display: block;
width: 100px;
height: 100px;
padding: 5px;
border: 1px solid blue;
background-color: yellow;
}
インラインブロックを使用してナビゲーションリンクを作成する
display: inline-blockの一般的な使い方の一つは、リスト項目を垂直ではなく水平に表示することです。次の例では、水平ナビゲーションリンクを作成します。
例
.nav {
background-color: yellow;
list-style-type: none;
text-align: center;
padding: 0;
margin: 0;
}
.nav li {
display: inline-block;
font-size: 20px;
padding: 20px;
}