In your journey as a web developer, one thing you will need understanding of to make web development smooth is the concept of block level and inline level elements in your HTML. An understanding of these elements and the properties will aid you in styling your HTML with little to no hassle.

What are the Differences between Block Level and Inline Level HTML Elements?#

HTML element types can be divided into two categories - block level elements and inline level elements.

Block level elements start on a new line and take up the entire width of a page and by default the browser automatically adds some space (a margin) before and after the element.
Some block level elements include:

<div></div><hr><li></li><ul></ul>

Block level elements by default are set to a display of block and to be able to 'hack' into their default setting and manipulate their behavior, one will have to reassign the value of the display property to an inline, or flex or whatever value they will prefer.

Inline level elements do not start on a new line but instead flow with text around them and only takes up as much width as necessary. Here are some in-line level elements:

<a></a><button></button><img>

To be able to change the default behavior of an in-line level element, one will have to change the value of its, display property to a block or any desired value.

That's all there is to it. Nothing complex here. So the next time you are trying to position or align an element that isn't responding, check what type of element it is and let this short article be your guide.