If you’re getting started in web development, you’ve probably come across the terms “inline” and “block” elements and wondered what the difference is.
Put simply, an inline element is one that can exist within a line of text, while a block element creates a new block on the page.
In this blog post, we’ll take a more in-depth look at the differences between inline and block elements so that you can start using them correctly in your own projects.
Inline Elements
Inline elements are those that can exist within a line of text. That means that, unlike block elements, they don’t create new lines on the page.
Some common examples of inline elements include <span>, <a> and <strong>. Let’s take a look at how these elements would be used in a sentence:
<p>
I'm going to the <span>store</span> to buy some <strong>milk</strong>. While
I'm there, I think I'll pick up a
<a href="https://en.wikipedia.org/wiki/Donut">donut</a> for breakfast.
</p>
As you can see, all of these inline elements can exist within the same line without creating new lines on the page. That’s because they’re designed to be used inline with text.
Block Elements
Block elements are those that create new blocks on the page. In other words, they always start on a new line and take up the full width available to them. Common examples of block elements include <div>, <p> and <h1>.
Let’s take a look at how these elements would be used in a sentence:
<div>This is a div element.</div>
<p>This is a paragraph element.</p>
<h1>This is a heading element.</h1>
As you can see, each of these block elements creates a new block on the page. That’s because they’re designed to be used as standalone elements that aren’t meant to be used inline with text.
Wrapping up
Now that you know the difference between inline and block elements, you can start using them correctly in your HTML code.
Remember that inline elements can exist within lines of text, while block elements always create new blocks on the page. If you have any questions about how to use these elements or want to learn more about web development in general, feel free to reach out to me I am always happy to help!