CSS レイアウト - display: inline-block

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; 
}

自分で試してみる

ナビゲーションリンクを作成するために inline-block を使用する

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;
}

自分で試してみる