რა განსხვავებაა display: block თვისებასა და display: inline თვისებას შორის?

ელემენტები, რომლებიც აქვს display: block, იკავებენ მთელ ხელმისაწვდომ სიგანეს, იწყებენ ახალ ხაზზე და განლაგებულია ვერტიკალურად. შესაძლებელია width, height, margin (ყველა მხარეს) და padding (ყველა მხარეს) განსაზღვრა.

display: inline ელემენტები იკავებენ ზუსტად იმდენ ადგილს, რამდენიც სჭირდება მათი შინაარსისათვის, მდებარეობენ ტექსტის ნაკადში და განლაგებულია ჰორიზონტალურად. შეუძლებელია width და height განსაზღვრა. ჰორიზონტალურად, შესაძლებელია margin და padding განსაზღვრა, ვერტიკალურად მხოლოდ padding. margin-top და margin-bottom არ გამოიყენება.

/* მაგალითი display: inline */
span {
  display: inline;
  /* width და height არ გამოიყენება */
  margin: 10px; /* margin-top და margin-bottom იგნორირებულია */
  padding: 5px;
  background-color: lightgreen;
}