CSSレイアウト-表示:インラインブロック
表示:インラインブロック値
と比較する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; /* the default for 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;
}
インラインブロックを使用したナビゲーションリンクの作成
の一般的な使用法の1つ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;
}