Default Display Values for Common HTML Elements
In CSS, every HTML element has a default display value that determines how it appears in the layout before any styles are applied. Some elements are block-level, taking up the full width, while others are inline, fitting within a line of text.
<div>—display: block;(starts on a new line and spans full width)<p>—display: block;(each paragraph starts on a new line)<span>—display: inline;(flows within text and takes up only its content width)<a>—display: inline;(behaves like text, can be placed inside or around text)
In this example, <div> and <p> elements appear one below another because they are block-level elements, while <span> and <a> appear inline, sharing the same line as text.
Block elements occupy full width and start on a new line.
Inline elements do not start on a new line and only take up as much space as needed.
You can override these defaults using the
displayproperty (e.g.,display: inline-blockordisplay: flex).Understanding default display behavior helps control page layout more effectively.