Когато ми се е налагало да обяснявам на някого за едните и другите, а именно Блоковите и Инлайн елементите, почти винаги съм срещал трудности и за това от няколко дни отделям по няколко минути на ден да напиша този пост и мисля че вече събрах нужната информация за тези елементи

Block Element - Блоковия Елемент

• Винаги започва на нов ред
• Може да манипулирате - height, line-height, top margin и bottom margin
• По подразбиране ширината му е 100% от неговия "parent" елемент, "child" елемент, освен ако не му е зададена ширина

Примерни блок елементи са: <div>, <p>, <h1> - <h6>, <form>, <ul>, <li> и други.

Inline Element - Инлайн Елемент

• Започва на един и същ ред
• height, line-height, top margin и bottom margin не могат да се манипулират
• Ширина на инлайн елемента е толкова, колкото е ширината на текста, снимката или друг елемент, който е в него

Примери за инлайн елементи са: <span>, <a>, <label>, <input>, <img> и други.

С помоща на CSS можем да кажем на браузера да възприема един елемент, като блоков или като инлайн.Това може да ни помогне когато:

• Искаме да имаме набор от инлайн елементи, всеки от които да стои на нов ред
• Искаме да имаме набор от блокови елементи, всеки от които да стои непосредственно след предния елемент
• Искаме да контролираме ширината на инлайн елемент
• Искаме да манипулираме височина или ширина на инлайн елемент
• и много много други ...

И да не забравяме, че има значение кога, къде и какви елементи използваме