目次
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;
}
1,display:inline-block を使用した後、ギャップの問題が発生し、そのギャップは 4 ピクセルです。この問題の原因は改行です。タグを記述するとき、通常はタグの終わりの後にキャリッジ リターンを押すためです。タグとキャリッジ リターンは、空白に相当するキャリッジ リターンを生成します。通常、複数の連続する空白は 1 つの空白に結合されます。「空白ギャップ」の本当の理由は、あまりお金を払わないことです。空白文字に注意してください。
2,ギャップを削除する方法: 親要素に {font-size:0} を追加します。つまり、フォント サイズを 0 に設定すると、空白文字も 0px になり、ギャップがなくなります。このメソッドはさまざまなブラウザと互換性がありますが、以前の Chrome ブラウザは互換性がありません。
3,ブラウザの互換性: ie6/7 は、display: inline-block と互換性がないため、追加の処理が必要です。ie6/7 では、インライン要素とブロックレベルの要素に {dislplay:inline-block;} を直接使用します。 {display:inline;zoom: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;
}