What is the difference between Float:left vs Display:inline? While every element in browser goes to left by default

display:inline means a element is will “stack” next to other items, like images, spans or the bold tag. This is opposed by block level elements (display:block) which take up horizontal space, imply a line break, and will not sit next to one another, like divs, paragraphs, or tables.

Think of it this way…

<img /><img /><img />

<div />
<div />
<div />

float is a different notion altogether, moving content either left or right. By default, a floated element is inline, and floated elements will stack up next to one another.

All of these types of elements are part of the normal document flow, meaning they take up “space” in the design that cannot be shared.

Leave a Comment