The display property is the most important CSS property for controlling layout. This property specifies if/how an element is displayed. Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.
HTML file: | Displayed by browser: |
---|---|
<div>This is a block-level element.</div>
<p>This is <span>an inline element inside</span> a paragraph.</p> |
This is a block-level element.
This is an inline element inside a paragraph. |
Block-level ElementsA block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can). These are examples of block-level elements:
|
Inline ElementsAn inline element does not start on a new line and only takes up as much width as necessary. These are examples of inline elements:
|