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

親自試一試