Every HTML element have a default display (assigned by the aptyle named
display property). The three values are:
The value dictates if the element can share horizontal space with other elements. A block element will typically cause a line break to occure, while an inline element do not force a newline and only takes as much width as necessary.
display property provides the ability to make any element a different element.
As written before, an inline element will not cause a line break and its box is tightly wrapped around it. It is also not possible to specify a height and width for those elements.
To learn more about inline elements see MDN.
Block-level elements are not displayed on the same level as the content around them. These elements fill the entire width by default, although the width can be set. As for the height, the element will use all the height necessary to accomodate their content. This too can be set.
A block-level element always starts on a new line.
To learn more about block elements see MDN.
Inline-block display combines features of both inline and block elements: they can appear next to each other and we can specify their dimensions using
height properties. A good example of inline-block elements are images.
Float and Clear
Float property can be use to yanks element far to the left or far to the right. It can also be used to float multiple elements at once. When this heppens and the different elements have different heights, the elements sometimes “bumps” into each other, not allowing other elements to properly move to the left or to the right.
The clear property sets how the elements should behave when they bump into each other. The possible values are:
leftthe left side of the element will not touch any element within the same containing element
rightthe right side of the element will not touch any element within the same containing element
bothneither side of the element will touch any element within the same containing element
nonethe element can touch either side