For the purpose of CSS styling, elements can be generally divided into a few different categories. Two of those categories are block-level elements and inline elements.
In my opinion, this is one of those areas that, once understood correctly, can help beginners to take their CSS skills to the next level.
Block-level Elements
A block element is an element that has, but may not be limited to, the following characteristics:
- If no width is set, will expand naturally to fill its parent container
- Can have margins and/or padding
- If no height is set, will expand naturally to fit its child elements (assuming they are not floated or positioned)
- By default, will be placed below previous elements in the markup (assuming no floats or positioning on surrounding elements)
- Ignores the
vertical-align
property
So, for a block element, it’s not necessary to give it a set width or to give it a width of 100% if you want it to fill its parent horizontally. In fact, doing either of those things may cause maintainability issues or other undesirable problems.
And, as the fourth item in the above list indicates, it’s also not necessary to “clear” a block element; assuming no floats are affecting the block element, it will be cleared automatically and will start on the next “line” in the page’s output.
Examples of Block Elements:
<p>
, <div>
, <form>
, <header>
, <nav>
, <ul>
, <li>
, and <h1>
.
Inline Elements
An inline element has, but may not be limited to, the following characteristics:
- Flows along with text content, thus
- Will not clear previous content to drop to the next line like block elements
- Is subject to white-space settings in CSS
- Will ignore top and bottom margin settings, but will apply left and right margins, and any padding
- Will ignore the
width
andheight
properties - If floated left or right, will automatically become a block-level element, subject to all block characteristics
- Is subject to the
vertical-align
property
The easiest way to picture an inline element is to think of it as a box that acts like text. What happens, for example, to text that’s not separated by other elements? It flows one letter after the other. If you put an inline element next to text, it will flow next to that text just like another piece of text.
Examples of Inline Elements:
<a>
, <span>
, <b>
, <em>
, <i>
, <cite>
, <mark>
, and <code>
.
Other Notes
You’ll notice that the examples of both block and inline elements are quite revealing: The block examples are structural elements, while the inline elements are text-based. This is an easy way to remember which is which, although at first you will sometimes be confused.
Generally speaking, you can put any block element inside another block element. You can also put any inline element inside a block element, as well as any inline element inside any other inline element. But you cannot put a block element inside an inline element — with (I believe) one exception: You can wrap an <a>
element around any content, whether it be block elements, or inline elements, or a mixture of both.
You have the option to change any block-level element to an inline element, and vice-versa, using the display
property. So keep that in mind if you need to do this. But don’t use the wrong element for the wrong purpose. An SEO guy once told me to put an <h2>
element inside of a paragraph, and style it to look like regular text, because he wanted an SEO boost. Not a good idea, that’s what <em>
is for.
One final thing to note is that, although from a CSS perspective block and inline do exist, from an HTML5 perspective, the different types of elements have been re-categorized, so that they’re more specific. You can read about these content models in the WHATWG HTML5 spec.
Bonus Tip: Replaced Elements
At the beginning, I said that block and inline were just two types of content. Generally speaking, those are the two primary kinds, and you won’t have to worry too much about any other kinds.
But there are what are referred to as replaced elements. Basically, these are neither block nor inline. But you might classify them as something closer to inline, but with block-like structure.
I won’t provide a detailed explanation here; you can check out the SitePoint article linked in the previous paragraph for full details. But some examples of replaced elements include:
<img>
, <object>
, <input>
, and <select>
.
Conclusion
If you’re just starting out with CSS, understanding the behaviour of block vs. inline elements will go a long way to helping you code sites that are efficient and maintainable and don’t rely on overuse of floats or other undesirable methods.
You should add information about ‘inline-block’ that allows us to set a padding/margin and other nice things on elements that still have the benefits only inline elements have.
Good point. I was actually planning to mention that but forgot. But I was just going to link to this article:
What is Inline-Block?
So anyone can check that out as a supplement to this article.
Unfortunately since inline-block doesn’t have full support in IE7, I don’t use it as much as I’d like to.
Then use hack for inline-block, use like this:
Ya this really works
Great job!
Keep on with the great work!
Thanks, I’m just starting out and this helped clear up some things. If you could post or direct me to where I can find information on: when to use (div id) and (div class) I would appreciate it, and also when to use relative and absolute positioning. for the last part, I get what the difference is, I just don’t know when I would use one over another. Thanks again though!
These two articles might help:
http://www.impressivewebs.com/absolute-position-css/
http://www.impressivewebs.com/difference-class-id-css/
@Louis Lazaris: you have made my day with this simplified info…..keep up the good work bro!!!
Recently I had to use an
h1
and anh2
one on top of the other, but the backgrounds for both had to extend just the width of the text, not the full width of the parent element. I decided to display them asinline
and, to position them one on top of the other, I added anhr
(a block element) with visibility set tohidden
between them. Hence it didn’t show, but it affected its neighbors anyway.I don’t know if it was the best solution, but it (apparently) solved my problem, and I got what I needed from both
inline
andblock
.please tell me simple what diffrent between inline & block
i hv confusion
Look at the two images in the article. The first one represents “block” and the other one is “inline”.
Which of these blocks can help if you user decides to shrink the browser size. For example I am looking at a normal 960 px site and then I shrink the page to 860 width…Which of these blocks can help to keep the content safe and organized?
You would use a block-level element, like a div or a section or something, not inline. A block element will automatically stretch to fill the page, even with no width assigned.
Recently only I also came to know the difference b/w inline and block level. This post is more clear by specifying points.
very clearly written. nice layout too. Thanks.
now really clear about that great written i am gonna save bookmark this page
It is pretty clear that the HTML 4.01 specification (http://www.w3.org/TR/html401/struct/links.html#edef-A) indicates that an <a> element may only contain inline elements. Since <div>, <p>, <h> and <p> are block elements, code like the following is technically and clearly “non-compliant”.
<a href=”http://www.google.com”><div><h1>Google</h1><p>search</p></div></a>
However, I have tested the above code in the latest version browsers and it actually works! Even when the <!DOCTYPE specified was strict HTML 4.01!
Never-the-less, if you check this code with the w3c Validator (http://validator.w3.org/) it will report the non-compliance for all <!DOCTYPE’s with the exception of <!DOCTYPE html> (HTML5).
Apparently HTML 5 specifically allows “block elements” to be nested with the <a> inline element?
Yes, what you are saying is correct.
The thing is, whether or not a browser accepts a div inside of a link has nothing to do with the doctype. Browsers do whatever they want to ensure they don’t break the web. Validation means nothing to browsers.
It’s not like programming something like PHP where an error can actually break the page. You can break tons of rules in HTML and see no consequences. In fact, when it comes to hacks and workarounds, it’s actually preferred to break rules. :)
thanks for this article now my doubt is clear thanks alot.. :)
So for block elements it is not necessary to set width and for inline width is ignored. So what is width for exactly?
I think you misunderstood what I was saying. Here is what the article says:
It’s only unnecessary if you want the element to fit naturally into its parent. And that only happens sometimes. All the rest of the times, you set a width.
Inline Element – If floated left or right, will automatically become a block-level element, subject to all block characteristics.
I don’t this will happen, I tried it but it does not get the characteristics of block element
Yes, it does. Here:
http://jsbin.com/heqam/1/edit
Notice if you remove the “float” declaration, the width and height will no longer take effect.
Hi Louis, nice article.
**Note**
All block level elements will fill parent element without setting width:100% except element with display:table.
CSS 2.1 spec incorporates this element to block level but table element is special case IMO and it has a relation to table layouts. Also note that inline-level elements accept padding but the behavior is like it is not accepted at all on vertical direction(padding-top/bottom).DEMO: http://jsfiddle.net/jho5rw85/
Here I made test of all display values(except table-column,table-row & company) http://jsfiddle.net/cssGuy/njxctp79/
Pay attention to display:initial (all elements are inline level according to the spec but user agent stylesheet overrides that).
You know all of that but this is a good refresher :D
just started reading this and came across something frustrating. if i don’t understand the difference between blocks and inline elements why would I know what it means to “clear” them
That’s a good point. I probably should have explained that. Basically to “clear” an element, just means to push it to the next line, below any previous elements, rather than having the element bump against the previous element horizontally. So instead of going beside a previous element, a cleared element will drop below it.
This article might help but even that one assumes a bit of existing knowledge on the subject.
1: Explain the difference between inline versus block elements.
inline elements will auto arrange side by side. block elements will arrange one-on-top of the other automatically
2: Give examples of each type of element.
inline: img / span block: div / h1
3: Can you change a block element into an inline element and vice versa? If so, how?
Block and inline elements can both be changed to each other. You can use display: inline; or display: block;
Thankt you very much for this great article.
Thats the short summarization i was searching for!
Thank you!
Timely suggestions , I learned a lot from the info . Does someone know where I might access a blank IMO Dangerous Goods Declaration example to type on ?
wow, it’s real super useful for me!
How do they flow together??
Block element are on their own line, while inline elements line up next to each other (like text), so they are on a separate line from block elements. So they don’t really flow together.
The below code
<!DOCTYPE html> <html> <head> <style> *{ margin:0; padding:0; } .container{ border:5px solid green; height:200px; width:200px; padding:10px; } span { border:5px solid red; } p { border:5px solid brown; } </style> </head> <body> <div class="container"> <span class="span1">This is a span 1 </span><p class="para1">This is a para 1</p> </div> </body> </html>
“the above code creates the span bottom border overlap over the brown paragraph top border” why is it so, why not the paragraph top border is over the span bottom border.
i have read that inline elements bottom and top border properties are ignored, but i could not understand the above scenario.
That’s a really good question…. More or less, this has to do with how stacking contexts are created, but I’m not 100% sure how to explain this. Here is a demo, in which I’ve added another paragraph below:
https://jsbin.com/xorehuq/edit?html,css,output
It seems like the brown paragraph should overlap the red one. If you look at this section of the spec, it tells you the order that elements should appear, but I haven’t studied it enough to understand why the inline borders overlap the block borders. I think because an inline element is basically considered “text”, it has a higher stacking order (or creates a new stacking context), but I might be wrong. I’ll have to look into this more because I’m a bit stumped myself.