Saturday, July 25, 2015

Block vs Inline

Block Element

Always takes the complete line width available.
Takes no float into account on the surrounding elements.


Example: DIV, H1-H6 Tags, FORM, P


To understand better, visualize the element as a box container.
 

Inline Element

Takes only necessary space in the line.


Example: Span, a, IMG


To understand better, visualize elements as normal words in a sentence.

Tip: To change the behavior of the elements, we can use the 'display' styling property. This can be an set using an inline styling or in a css.