display: block özelliği ile display: inline özelliği arasındaki fark nedir?

display: block olan öğeler, kullanılabilir tüm genişliği kaplar, yeni satıra başlar ve dikey olarak dizilir. width, height, margin (tüm kenarlar) ve padding (tüm kenarlar) ayarlanabilir.

display: inline olan öğeler, içeriğin ihtiyaç duyduğu kadar alan kaplar, metin akışında bulunur ve yatayda hizalanır. width ve height ayarlanamaz. Yatayda margin ve padding ayarlanabilir, dikeyde sadece padding. margin-top ve margin-bottom uygulanmaz.

/* Örnek display: block */
div {
  display: block;
  width: 100px;
  height: 50px;
  margin: 10px;
  padding: 5px;
  background-color: lightblue;
}

/* Örnek display: inline */
span {
  display: inline;
  /* width ve height uygulanmaz */
  margin: 10px; /* margin-top ve margin-bottom yok sayılır */
  padding: 5px;
  background-color: lightgreen;
}