дисплей: встроенный против дисплея: блок

Question

Какова основная разница между следующим CSS:

display:inline

и этим:

display:block

Используя их отдельно для элемента, я получаю тот же результат.

Answer 1

Элементы блока : Элементы понравились div, p, заголовки - это уровень блока. Они начинаются с новой строки и занимают всю ширину родительского элемента. Встроенные элементы : Элементы, которым понравились b, i, span, img, являются встроенными уровнями. Они никогда не начинаются с новой строки и занимают ширину контента.

Answer 2

блок или встроенный блок может иметь ширину (например, ширину: 400 пикселей), в то время как на встроенный элемент ширина не влияет. встроенный элемент может охватывать следующую строку текста (например, http://codepen.io/huijing/pen/PNMxXL изменить размер окна браузера, чтобы увидеть это), в то время как блочный элемент не может.

 .inline {
      background: lemonchiffon;
      div {
        display: inline;
        border: 1px dashed darkgreen;
      }