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;
}