CSS Düzen - display: inline-block

display: inline-block

ile display: inline karşılaştırıldığında, ana fark display: inline-block Element üzerinde genişlik ve yükseklik ayarlanmasına izin verilir.

Aynı şekilde, display: inline-block olarak ayarlandığında, yukarı ve aşağı dış kenar boşluğu/çapraz kenar boşluğunu korurken, display: inline ise bu kenar boşluklarını içermez.

display: block ile karşılaştırıldığında, ana fark display: inline-block'un elementin ardından satır atlamayı eklememesidir, bu nedenle bu element diğer elementlerin yanında yer alabilir.

Örnek olarak, display: inline, display: inline-block ve display: block'un farklı davranışlarını gösterir:

Örnek

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

Kişisel Deneyimleyin

Navigasyon bağlantıları oluşturmak için inline-block kullanımı

display'in yaygın kullanım şekli:inline-block Liste öğelerini yatay olarak değil dikey olarak göstermek için kullanılır. Aşağıdaki örnek, bir yatay navigasyon bağlantısı oluşturur:

Örnek

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

Kişisel Deneyimleyin