display: block xususiyati bilan display: inline xususiyati qanday farq qiladi?

display: block bilan bo'lgan elementlar mavjud bo'lgan kenglikni to'liq egallaydi, yangi satrda boshlanadi va vertikal ravishda joylashadi. width, height, margin (hamma tomonlar uchun) va padding (hamma tomonlar uchun) ni belgilash mumkin.

display: inline bilan bo'lgan elementlar o'z ichiga olgan matn hajmida joy egallaydi, matn oqimida joylashgan va gorizontal ravishda joylashadi. width va height ni belgilash mumkin emas. Gorizontal ravishda margin va padding ni belgilash mumkin, vertikal ravishda faqat padding. margin-top va margin-bottom qo'llanmaydi.

/* Misol display: inline */
span {
  display: inline;
  /* width va height qo'llanmaydi */
  margin: 10px; /* margin-top va margin-bottom e'tiborga olinmaydi */
  padding: 5px;
  background-color: lightgreen;
}