HTML elements can be broadly categorized into one of two categories:
- Inline Elements:
<span>
,<a>
,<strong>
,<img>
etc. - Block Elements:
<p>
,<div>
,<h1>
,<figure>
etc.
HTML Inline Elements
Inline elements are displayed on the same line. They do not start on a new line and take up only as much width as their contents require. An example of an inline element is the <span>
tag.
<p>This is how <span style="border: 1px solid black">span</span> works. </p>
Browser Output
![HTML Span is an Inline Element Example of span as an inline element](http://devcdn.programiz.com/cdn/farfuture/aTihkE9dL86CJUMD08flexZdlhbkvWxZAu66lAh7hY8/mtime:1677313381/sites/tutorial2program/files/html-inline-example.png)
If we have multiple span tags, they get placed on the same line. For example,
<p> The following spans will be inline; <span style="border: 1px solid black">Span 1</span> and <span style="border: 1px solid black">Span 2</span>.</p>
Browser Output
![Inline elements in same line Example of multiple spans on the same line](http://devcdn.programiz.com/cdn/farfuture/Yqgn3rlctGIAHXfDGWrE3-D8xiVNr-h1Zx2ftA2LWgk/mtime:1677313381/sites/tutorial2program/files/html-inline-example-2.png)
Some examples of inline elements are:
- HTML
<a>
tag - HTML
<input>
tag - HTML
<span>
tag
Most HTML formatting tags are also inline. For example:
- HTML
<b>
tag - HTML
<em>
tag - HTML
<strong>
tag, etc
HTML Block Elements
Block elements take up the whole horizontal space available in its container. They start on a new line and take up as much height as their contents require.
An example of a block element is the HTML Paragraph Tag.
<p style="border: 1px solid black">This is how block elements works. </p>
Browser Output
![HTML Paragraph is an Inline Element Example of paragraph as an inline element](http://devcdn.programiz.com/cdn/farfuture/KQJRvhKOluRobDN2H3uafAS2HAor2g0yBBEfcMCz-dY/mtime:1677313380/sites/tutorial2program/files/html-block-example.png)
If we have multiple block elements, they will each take a separate line. For example,
<p style="border: 1px solid black">Paragraphs are</p> <p style="border: 1px solid black">Block Elements.</p>
Browser Output
![Multiple HTML Paragraph Elements Example of multiple paragraph elements on different lines](http://devcdn.programiz.com/cdn/farfuture/B_osaGuOnWMBnlxqzxZrbjHTzmKvI1vAFCrxZwnIEWE/mtime:1677313364/sites/tutorial2program/files/html-block-example-2.png)
Some frequently used Block elements are:
- HTML
<div>
tag - HTML Headings
<h1>
-<h6>
- HTML
<p>
tag, etc
Css With Html Inline And Block Elements
CSS properties height
and width
have no effect on inline elements.
<p> The following span is an <span style="border: 1px solid black">Inline Element.</span></p>
<style>
span {
height: 200px; /* No Effect on Element */
width: 200px; /* No Effect on Element */
}
</style>
Browser Output
![CSS Height and Width have no effect on inline elements HTML Span element with height and width set](http://devcdn.programiz.com/cdn/farfuture/1wQM2l7YjitRdM5W87XZMibqTV0kS9YPY_qdLC5GxB8/mtime:1677313382/sites/tutorial2program/files/html-inline-elements-css.png)
Inline elements also do not have top and bottom margins, they only respect left and right margin.
<div><span>1</span><span>2</span></div>
<div><span>3</span><span>4</span></div>
<style>
span {
margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px;
border: 1px solid black;
}
</style>
Browser Output
![Margin top and bottom have no effect on inline elements HTML span with margins](http://devcdn.programiz.com/cdn/farfuture/OC-uv_PHmMVEwjOA0Hvht3mnOfIV3K66pfjWExV7g0w/mtime:1677313365/sites/tutorial2program/files/html-inline-margin.png)
Inline elements respect padding in all directions.
<p><span>This is a span</span></p>
<style>
span {
padding: 10px;
border: 1px solid black;
}
</style>
Browser Output
![Inline Element with padding HTML span element with padding](http://devcdn.programiz.com/cdn/farfuture/DmXnbLcRuYT3l-oddbCoPaa3L-mCe_MmfSCKWsbo4hc/mtime:1677313364/sites/tutorial2program/files/html-inline-span-padding.png)
Block elements respect height
and width
properties. We can change both height and width of block elements using CSS.
<p style="border: 1px solid black;">This paragraph is a block element.</p>
<style>
p {
height: 200px; /* This works */
width: 200px; /* This works */
}
</style>
Browser Output
![HTML Paragraph with Height and width set HTML Paragraph with Height and width set](http://devcdn.programiz.com/cdn/farfuture/UT-D12qdoB1jFPMycD_KkPkVYj3L3xesalCVmZDtQ28/mtime:1677313377/sites/tutorial2program/files/html-block-css.png)
Block elements take up the whole width of the parent container even if we set their width to a smaller size. Hence we cannot have a block element with another element in the same line without CSS. For example,
<p style="width: 20px; border: 1px solid black;background-color: lightblue">1</p><p style="width: 20px; border: 1px solid black; background-color: lightblue">2</p>
Browser Output
![HTML Block elements take up whole line regardless of width HTML Paragraphs with width set](http://devcdn.programiz.com/cdn/farfuture/9uSKIi79a-Y2wDFi5B3tNFpL5jukI62xGq7wALyFCfI/mtime:1677313376/sites/tutorial2program/files/html-block-whole-width.png)
Block elements also respect top and bottom margins and padding directions. For example,
<div>Block</div>
<div>Block</div>
<style>
div {
border: 1px solid black;
padding: 10px;
margin: 10px;
}
</style>
Browser Output
![HTML Block element with margin and padding 2 Div elements with margin and padding](http://devcdn.programiz.com/cdn/farfuture/1fS2_1JJq51rW9EBXv_hLfohpWAwHwvoPcLkrHEG4BY/mtime:1677313377/sites/tutorial2program/files/html-block-margin-padding.png)