HTML Block and Inline Elements
Every HTML element has a default display value, depending on what type of element it is. There are two display values: block and inline.
Last updated
Every HTML element has a default display value, depending on what type of element it is. There are two display values: block and inline.
Last updated
A block-level element always starts on a new line, and the browsers automatically add some space (a margin) before and after the element.
A block-level element always takes up the full width available (stretches out to the left and right as far as it can).
Two commonly used block elements are: <p>
and <div>
.
The <p>
element defines a paragraph in an HTML document.
The <div>
element defines a division or a section in an HTML document.
Here are the block-level elements in HTML:
An inline element does not start on a new line.
An inline element only takes up as much width as necessary.
This is a <span> element inside a paragraph.
Here are the inline elements in HTML:
The <div>
element is often used as a container for other HTML elements.
The <div>
element has no required attributes, but style
, class
and id
are common.
When used together with CSS, the <div>
element can be used to style blocks of content:
The <span>
element is an inline container used to mark up a part of a text, or a part of a document.
The <span>
element has no required attributes, but style
, class
and id
are common.
When used together with CSS, the <span>
element can be used to style parts of the text:
There are two display values: block and inline
A block-level element always starts on a new line and takes up the full width available
An inline element does not start on a new line and it only takes up as much width as necessary
The <div>
element is a block-level and is often used as a container for other HTML elements
The <span>
element is an inline container used to mark up a part of a text, or a part of a document