Ի՞նչ տարբերություն կա 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;
}