Media Temple Hosting

Welcome to CSS Basics. More info on this section at the bottom of this post.

The Difference Between “Block” and “Inline”

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>.

Block-level Elements

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 and height 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>.

Inline Element

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 eleemnts, or inline elements, or a mixure 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.

Questions? Clarifications?

This post is not intended to be an exhaustive reference on this subject. It's meant to provide a simple CSS tip for beginners. If you have any questions or clarifications on anything I've said here, add them to the comments. If necessary, I'll continually improve this article to keep it up to date with the latest CSS standards and best practices.

This is the CSS Basics section of Impressive Webs. These posts do not appear in the main home page feed. You can subscribe via RSS or get an email notification whenever a new post is added.

21 Responses

  1. 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.

  2. Dusan:

    Great job!
    Keep on with the great work!

  3. Mtliendo:

    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!

  4. Recently I had to use an h1 and an h2 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 as inline and, to position them one on top of the other, I added an hr (a block element) with visibility set to hidden 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 and block.

  5. Shahbaz Ahmed Bhatti:

    please tell me simple what diffrent between inline & block

    i hv confusion

  6. 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.

  7. Recently only I also came to know the difference b/w inline and block level. This post is more clear by specifying points.

  8. very clearly written. nice layout too. Thanks.

  9. Prince:

    now really clear about that great written i am gonna save bookmark this page

  10. JP:

    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. :)

  11. thanks for this article now my doubt is clear thanks alot.. :)

  12. matt:

    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:

      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.

      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.

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field. If you use keywords, your comment will be deleted, or your name will be replaced with the alias from your email address. No foul language, please. Thank you for cooperating.

Instructions for code snippets: Wrap inline code in <code> tags; wrap blocks of code in <pre> and <code> tags. When you want your HTML to display on the page in a code snippet inside of <code> tags, make sure you use &lt; and &gt; instead of < and >, otherwise your code will be eaten by pink unicorns.