display: block xüsusiyyəti ilə display: inline xüsusiyyəti arasındakı fərq nədir?

display: block olan elementlər mövcud olan genişliyi tam tutur, yeni sətirdən başlayır və şaquli şəkildə düzülür. width, height, margin (bütün tərəflər üçün) və padding (bütün tərəflər üçün) təyin oluna bilər.

display: inline olan elementlər, məzmunlarının ehtiyacı olan qədər yer tutur, mətn axınında yerləşir və üfüqi olaraq düzülür. width və height təyin oluna bilməz. Üfüqi olaraq, margin və padding təyin oluna bilər, şaquli olaraq yalnız padding. margin-top və margin-bottom tətbiq edilmir.

/* Nümunə display: block */
div {
  display: block;
  width: 100px;
  height: 50px;
  margin: 10px;
  padding: 5px;
  background-color: lightblue;
}

/* Nümunə display: inline */
span {
  display: inline;
  /* width və height tətbiq edilmir */
  margin: 10px; /* margin-top və margin-bottom nəzərə alınmır */
  padding: 5px;
  background-color: lightgreen;
}