Мубодилаи хусусияти display: block бо хусусияти display: inline чӣ фарқ дорад?

Элементҳо бо display: block тамоми паҳнои дастрасро мегиранд, аз нав оғоз мекунанд ва ба таври амудӣ ҷойгир мешаванд. Мумкин аст, width, height, margin (барои ҳамаи тарафҳо) ва padding (барои ҳамаи тарафҳо) муқаррар карда шаванд.

Элементҳо бо display: inline дақиқ он қадар ҷой мегиранд, ки мӯҳтавояшон лозим аст, дар ҷараёни матн ҷойгир мешаванд ва дар уфуқӣ ҳамоҳанг мешаванд. Нест, ки width ва height муқаррар карда шаванд. Дар уфуқӣ, margin ва padding муқаррар кардан мумкин аст, дар амудӣ танҳо padding. margin-top ва margin-bottom татбиқ намешаванд.

/* Мисол display: block */
div {
  display: block;
  width: 100px;
  height: 50px;
  margin: 10px;
  padding: 5px;
  background-color: lightblue;
}

/* Мисол display: inline */
span {
  display: inline;
  /* width ва height татбиқ намешаванд */
  margin: 10px; /* margin-top ва margin-bottom нодида гирифта мешаванд */
  padding: 5px;
  background-color: lightgreen;
}