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.