Hello! Let's discuss the default display values of HTML elements.
Essentially, each element within HTML has a default display value that determines how it is presented on the webpage. The two common values are "block" and "inline".
When an element is set to "block," it occupies its own line on the page and expands horizontally to fill all available space.
Whereas, when an element is set to "inline," it behaves similar to a text character. It does not occupy its own line but instead flows with the rest of the content. It becomes more like a part of a sentence rather than standing independently.
Block Elements
A block-level element starts a new line in the layout and extends horizontally from its starting point to the leftmost and rightmost edges of its containing element or parent container.
Additionally, browsers automatically add margin both before and after the block element.
Most common block elements are: <div>, <h1>, <p>.
Inline Elements
An inline element does not start on a new line and only occupies the necessary width.
This means that you can have multiple inline elements sitting side by side without any line breaks getting in the way.
Most common inline elements are: <span>, <a>.
Example
To make things simpler, you can click the button below to open the playground, which comes with pre-filled HTML.
In the editor, you will see HTML, CSS, and JS input on the left/top, and the output on the right/bottom. We only need the HTML editor, so feel free to minimize the other two if you want.
Try changing the `span` element to any block element and see the difference.
Want to practice more? Click here for more hands-on exercise.
References: