A block-level HTML element will always create a new line after the closing tag, whereas an inline HTML element will not
Inline vs block is one of the most important factors when choosing which HTML element to use in your markup. Semantics matter as well, and this should always be considered. But the display behavior will have a direct impact on the visual aspect of your page. With a block-level element, there will always be a new line after the closing tag. So, no matter how you organize your HTML, block-level elements always create a new line. With an inline element, there is never a new line. Therefore, no matter how you organize your inline-elements in the markup, they will always appear side-by-side.
Okay, so every HTML element that has a visual presence is either inline or block, by default. For example, HTML elements such as “SPAN”, “IMG”, and “LABEL” are inherently inline. On the other hand, HTML elements such as “DIV”, “P”, and “UL” are block by default. This default behavior can be changed, however; i.e., inline elements can be set to display:block, and block-level elements can be set to display:inline. There’s no reason why you can’t apply this kind of reverse display logic; it’s perfectly valid. Just keep in mind, though, that there may be visual ramifications, but, of course, that’s up to you. It’s just important for you to know that if you want to, you can change the default visual behavior of inline and block-level elements.
Example # 1 – Default Behavior
See the Pen CSS Block vs Inline Part 1 by Front End Video (@frontendvideo) on CodePen.
In Example # 1, there are three spans and three divs. As expected the spans all line-up side-by-side. In other words, because they are inline elements, there is no new-line after each element. Whereas with the div elements, each one appears on a new line. This is the default behavior of inline and block elements.
Example # 2 – Changing Default Behavior
See the Pen CSS Block vs Inline Part 2 by Front End Video (@frontendvideo) on CodePen.
In Example # 2, we have reversed the behavior of the elements in the page. Even though the spans are inline elements, they now stack on top of each other. This is because in the CSS, we set display:block for the spans. As a result, they behave like block-level elements. Also, the divs now line-up side-by-side. This is because in the CSS, we set display:inline.
Summary
Now while it may seem like overkill to discuss reversing the default visual behavior of inline and block-level elements, it is not at all unusual, so it’s worth having given it a closer look. There may be semantic reasons, for example, as to why you choose a particular HTML element, but need to change its display behavior. A typical example is a NAV element; you might want to use an unordered list for your web page navigation, but you need the navigation links to line up side-by-side. In this case, you would need to change the default block-level display of the list items to inline. So, this is just one small example of why it’s always nice to know where you have a little wiggle room.
