Conquer CSS by Understanding Inline and Block Level Elements
Understanding block and inline elements in html will help you conquer CSS. Pluralsight covers the differences, plus when and how to use them. Learn now!
Dec 4, 2014 • 3 Minute Read
Updated 9/2/2020
In HTML, block and inline elements are the building blocks of web pages with each having a default display value.
A block element only appears within a <body> element and uses <div> as an HTML tag to define a section.They begin on new lines, take up the full width of the page, and may contain inline elements or sometimes other block level elements.
An inline element is a presentational characteristic that uses <span> as an HTML tag to define a section. They do not start on a new line, only occupy the space bounded by the tags defining the element, and may only contain other inline elements.
Now, please note that while understanding block and inline elements is still relevant, the distinctions between block and inline elements were used up through HTML 4.01. These two categories have since been replaced with a different set of content categories:
The block level category no longer has a directly corresponding content category.
The inline category now roughly corresponds to the “phrasing content” category which defines the text and mark-up it contains.
The block level and inline elements have combined together to correspond to the “flow content” category which typically contains text or embedded content.
Why Do I Need to Know the Difference Between Block and Inline Elements?
Knowing the difference between inline vs. block elements will help you immensely with your CSS and styling. Because they each behave in a particular way, it will be easier to get them to do what you want them to do with your CSS if you have a solid understanding of the two.
If you don’t understand the different rules that apply to inline elements vs. block elements, HTML and CSS can be incredibly frustrating. For example, block elements can contain other block level elements as well as inline elements. However, inline elements can only contain inline elements.
So let’s say you’re trying to style a span and you’re noticing that it won’t do what you want it to do. Look and see if you’ve accidentally put a paragraph in there. While it may seem like a paragraph can go in a span (since spans are sometimes used as containers) a paragraph is a block level element so it doesn’t belong in a span. If you need to have paragraphs in a container, try a block level element like <div> instead of <span>.
What Is the Difference Between Inline and Block Elements?
When examining inline vs. block elements, you’ll notice that inline elements are usually text-based and block level elements are usually structural.
Inline Elements
Inline elements don’t start on new lines, meaning they line up right next to each other on the same line if there’s enough room for them because they can’t take top/bottom margins or width/height properties. But, they can still be styled with left/right margins as well as with padding.
Inline elements:
Use
<span>as an HTML tag to define a section.Only occupy the space bounded by the tags defining the element.
Does not start on a new line.
Take up as much width as necessary.
Don’t break the flow of the content.
May contain only data.
May contain other inline elements.
Are specified by CSS in the Flow Layout.
Can have their visual presentation changed using the CSS display property, but doing so will not change the category and content model.
Some common inline elements are:
<a><button><cite><code><data><em><i><select><span><time><video>
The image below showcases the behavior of inline elements. All the spans have a yellow border applied so you can see the width of the elements.
Block Level Elements
By default, a block level element takes up the entire width of its parent container. After it’s reached the edge of the container it’ll drop below the other elements. So, even if you only have one paragraph in the <body> then it will still take up the entire width of the browser. That is, unless you’ve set a width for the body. It also means that if you have short sentences in separate paragraph tags, each paragraph will start on a new line.
Block level elements:
Use <div> as an HTML tag to define a section.
Only appear within a
<body>element.Begin on new lines.
Take up the full width of the page.
Have a line break before and after the element.
Create “larger” structures.
May also contain inline elements.
May sometimes contain other block level elements.
A few of the most common block level elements are:
<address><article><div><h1><header><li><main><nav><ol><p><table><ul>
The image below showcases the behavior of block level elements. All the paragraphs have a green border applied so you can see the width of the elements.
Learn More About Block vs. Inline
Have we piqued your interest about the differences between inline and block elements and how they can be used to give yourself more control with your CSS? Yes? Good!
Now it’s time to learn more about block level and inline elements by starting Pluralsight’s HTML Document Flow course!
