This is a block level element.
This is another a block level element.
And this is yet another a block level element.
A block-level element starts on a new line, and anything that follows also appears on a new line.
Think of a block as having an implicit <br /> (line break) before and after the element.
This example has three block-level <div> elements. Notice the following:
<style>
.ghost { background: ghostwhite; margin: 10px; padding: 10px; }
</style>
<main>
<div class="ghost">This is a block level element.</div>
<div class="ghost">This is another a block level element.</div>
<div class="ghost">And this is yet another a block level element.</div>
</main>
In HTML, the flow of page elements is determined by block and inline level elements.
This distinction is important for front-end developers to be able to compose the pages correctly.
<div> is an example block-level element. <span> is an inline-level element
<div> is just one example of a block element in HTML.
Many other elements display in-block by default. Here's the complete list:
If an element is not in-block, then it must be inline.
Inline elements appear on the same line.
<span> is an inline element.
Three <span> elements that are inline.
Notice they appear on the same line -- until there is no room, then they wrap.
<span>This is an inline element.</span>
<span>This is another inline element.</span>
<span>And this is yet another inline element.</span>
<span> is just one example of an inline element in HTML.
Many other elements display inline by default. Here's the complete list:
The <div> tag is often used to create layouts with different areas on a page.
This tag is also used to group HTML elements and apply CSS styles to the group.
A block-level <div> element.
You will receive your tickets to the Louvre by email.
<div style="background-color:ghostwhite; padding: 20px;border:1px dotted steelblue;">
<h5>Order Received</h5>
<p>You will receive your tickets to the Louvre by email.</p>
</div>
For details on the <div> tag, see our HTML div tag reference.
The <span> tag is used to group page content, often text, which can then be styled with CSS.
An inline <span> element with the word 'cancelled'.
Sorry, your order #42291 has been cancelled.
<p>
Sorry, your order #42291 has been <span style="color:orangered;">cancelled</span>.
</p>
For details on the <span> tag, see our HTML span tag reference.
With CSS any HTML element can be displayed 'in-block' or 'inline'.
Even block-level elements can be displayed as inline and vice versa.
The CSS display property let you select the display mode.
Here are 3 <span> elements that are displayed in-block using the CSS display:block setting.
Effectively, they have turned into <div> elements.
<style>
.block {display:block;background:ghostwhite;padding:10px;margin:10px;}
</style>
<span class="block">This span is displayed as a block-level element.</span>
<span class="block">This span is displayed as a block-level element.</span>
<span class="block">This span is displayed as a block-level element.</span>
