CSS Block vs Inline CSS Display Styles

HTML elements can be displayed either in block or inline style.

The difference between these is one of the most basic things you need to know in order to use CSS effectively.

If you’d like to master CSS, here are the books I’d recommend!

The 3 ways that HTML elements can be displayed

All HTML elements are naturally displayed in one of the following ways:

Block
Takes up the full width available, with a new line before and after (display:block;)
Inline
Takes up only as much width as it needs, and does not force new lines (display:inline;)
Not displayed
Some tags, like <meta /> and <style> are not visible (display:none;)

Block example

<p> tags and <div> tags are naturally displayed block-style.

(I say “naturally” because you can override the display style by setting the CSS display property e.g. display:inline;.)

A block-display element will span the full width of the space available to it, and so will start on a new line in the flow of HTML. The flow will continue on a new line after the block-display element.

Here I’ve started a paragraph and now I’m going to insert a <div>

new div inside my paragraph

and then continue the text here…

See how the <div> jumped in and took over the full width of the space?

Common HTML elements that are naturally block-display include:

<div>
Your general-purpose box
<h1> … <h6>
All headings
<p>
Paragraph
<ul>, <ol>, <dl>
Lists (unordered, ordered and definition)
<li>, <dt>, <dd>
List items, definition list terms, and definition list definitions
<table>
Tables
<blockquote>
Like an indented paragraph, meant for quoting passages of text
<pre>
Indicates a block of preformatted code
<form>
An input form

Inline example

Inline-display elements don’t break the flow. They just fit in with the flow of the document.

So here I’ve got a paragraph going on, and I’m going to add a <span> tag that has a yellow background and italic text. See how it just fits right in with the flow of the text?

More elements are naturally inline-style, including:

<span>
Your all-purpose inline element
<a>
Anchor, used for links (and also to mark specific targets on a page for direct linking)
<strong>
Used to make your content strong, displayed as bold in most browsers, replaces the narrower <b> (bold) tag
<em>
Adds emphasis, but less strong than <strong>. Usually displayed as italic text, and replaces the old <i> (italic) tag
<img />
Image
<br>
The line-break is an odd case, as it’s an inline element that forces a new line. However, as the text carries on on the next line, it’s not a block-level element.
<input>
Form input fields like
and
<abbr>
Indicates an abbr. (hover to see how it works)
<acronym>
Working much like the abbreviation, but used for things like this TLA.

You change the display property of any elements

Although each HTML element has its natural display style, you can over-ride these in CSS.

This can be very useful when you want your page to look a particular way while using semantically-correct HTML.

Examples

Say you want to provide a list of items, but you don’t want a big bulleted list. You just want to say that you’re going to the store to buy:

  • some fizzy drinks,
  • a chainsaw,
  • and some nylon stockings.

Or maybe you want a nice toolbar, which is stricly a list (of links) and so should be marked up as a <ul>.

Here’s the code

<ul>

<li><a href=”#”>Home</a></li>
<li><a href=”#”>About us</a></li>
<li><a href=”#”>Products</a></li>
<li><a href=”#”>FAQs</a></li>
<li><a href=”#”>Contact us</a></li>

</ul>

Here’s how it looks as a normal list

Just adding the class “toolbar”…

<style type=”text/css”>

.toolbar li {

display:inline;
background-color:#eee;
border:1px solid;
border-color:#f3f3f3 #bbb #bbb #f3f3f3;
margin:0;
padding:.5em;
zoom: 1;

}

</style>

<ul class=”toolbar”>

<li><a href=”#”>Home</a></li>
<li><a href=”#”>About us</a></li>
<li><a href=”#”>Products</a></li>
<li><a href=”#”>FAQs</a></li>
<li><a href=”#”>Contact us</a></li>

</ul>

 

Here’s how it looks with the CSS styles applied

 

 

See our production worked example ebook for more in-depth CSS tricks!

Or these books from Amazon will really help you learn HTML and CSS..

How to Be a True Web Professional

 

 

 

 

48 Comments Leave a comment

  1. Renyo Borges says:

    actually there are more ways to display some elements, you can checkout on w3c docs…

  2. Jason says:

    I like this quick listing of block and inline elements.

    I think you should change round the and example so the example is actual valid code.

    We don’t want more people creating invalid code. Theres plenty of it out there already and the next generation should be taught correctly form the outset.

    Sorry for being a stickler but it’s important yes.

  3. Jason says:

    *edit
    “I think you should change round the <div> and <p> example so it is actual valid code.

  4. Sam Thunderbolt says:

    Thanks!! That helped a lot! Very clearly explained and exactlty what I wanted to know :) .

  5. Hemang Bavishi says:

    I like this quick listing of block and inline elements.

    I think you should change round the and example so the example is actual valid code.

    Thank you..

  6. Pingback: A Flare for Help » Blog Archive » Text boxes in print output

  7. kanika says:

    very clearly explained it

  8. Prof.Yeow says:

    thanks for the code.

  9. Daniel Ziegler says:

    Actually, tags are display:inline-block; . Basically, they are treated as inline externally, but you can set their width, height, margins, and paddings, and their insides are laid out like block elements.

    (P.S. The commenting system doesn’t seem to work in Chrome 9)

  10. Pingback: Inline HTML List « Sanjay Vamja: The Techie

  11. Pingback: JavaScript 101, Beginner's Guide to Learning Block / Inline JavaScript

  12. Pingback: Spaces Between Images | My Monkey Do

  13. Peka says:

    I think you’ve hit the nail on the head mate, with your crystal clear explanation.

    Sure…. some will challenge (and confusicate people), but your simplicity is perfect.

    Don’t listen to these nanny goats.

    • I♥code says:

      Confuscate? No, teaching VALID code is better. Invalid code is just waiting to break, if it even works at all.

      Sure, I could write ‘CSS’ like
      paragraphs: line them up and stuff;
      or p {links:all in one line, please;}
      and it would be no less valid than some of the codes I’ve seen people try to use. Is it any wonder why their codes never work right?

      W3C does what they do for a reason.

  14. Pingback: hover effekt verschieben - Seite 2 - XHTMLforum

  15. LD says:

    I was looking for a way to use inline style (the site I’m using doesn’t really allow for CSS) to add BACKGROUND color to just a few lines of text. Thanks so much for the clear explanation & code. Very grateful.

  16. Helen Neely says:

    Wow, thanks for this CSS sample. Was looking for inline CSS and this will help with my current requirement.

    That said, does anyone know how to apply styling to anchor links inline? My requirement is to apply styles to texts and links inline and not in the header.

    • I♥code says:

      After [a href=""], write [style=""]. Fill in the quotes using CSS.

      [a href="someURL.html" style="color:#000088;"]

      Better yet, create a new class in the CSS at the top.

      a.altlink {color:#000088;}
      and
      [a href="someURL.html" class="altlink"]

      ([Square brackets] should be replaced with < angle brackets >)

  17. juanma says:

    I think you can use float:left or float:right in the li to determinate the inline properties.

    But thank for your tip :)

    • I♥code says:

      Actually, floats will just shift the vertical column left or right, not put the individual elements inline.

  18. Pingback: What is the different between CSS Block and Inline CSS Display Styles [closed] | SeekPHP.com

  19. Muzietto says:

    I have read the first example and I am already skeptical: you write “Here I’ve started a paragraph and now I’m going to insert a
    …new div inside my paragraph…
    and then continue the text here”
    but if I look at the page code, I see the div is enclosed BETWEEN TWO PARAGRAPHS, not INSIDE ONE.
    Your wording is misleading. I’m not bookmarking this page. Jason is right.

    • Ben Hunt says:

      Thanks for bringing that to my attention. You’re right that it did end the paragraph and start a new one. That was actually caused by our move to WordPress, which automatically manages your paragraphs. I removed the extra line breaks, and it’s now back to one paragraph.

  20. Pingback: What use does the CSS display value 'inline-block' have? - Quora

  21. Pingback: Floating right an image alongside a H3 tag | SeekPHP.com

  22. Pingback: lindanisbett.com » Blog Archive » Resource Links for November

  23. bitoolean says:

    People reading this article should read the CSS reference too.
    What about the writer of the article confusing people?
    Daniel Ziegler is right, you forgot the “inline-block” option which specifies a sized rectangle/block around which text and other content can wrap.
    I may be wrong (I’m still only learning web mark-up and programming languages) but I think this article is confusing and well-meaning people who don’t know exactly what they’re saying can do more harm than good.
    Too bad, you have a talent for teaching in an easy-to-grasp manner.

  24. Pingback: Awesome CSS Resources : It Does Not Follow

  25. manochehr says:

    I’m new in web design this article was very helpful for me.
    thanks

  26. Pingback: MySource Matrix – Content Types | Locksmack

  27. Haftegi says:

    oh ben thank youuuu. it’s very easy

  28. Markandey Gupta says:

    This is very nice article Block Vs Inline. I can understand line by line you know I am first time read how many type of block & inline tag.
    Thank you very much.

  29. kyle says:

    This is the best description of FLOAT vs INLINE I have ever read. No one ever uses the existing HTML tags to describe how this works which is why everyone (including myself) are soo confused about what float is and how it works. Thanks!

  30. Manimaran says:

    Check this page some design issue is there.When scroll down books sections are overlap with footer section.

    • Ben Hunt says:

      It looks OK to me. What browser are you using?

  31. JamieD says:

    Good page, nice and clear. Needs a mension that ie and everyone else renders these differently and ie hacks are usually needed.

  32. Pingback: JavaScript 101: Hello World! » iwtacademy.in

  33. sopier says:

    Hi, clear n to the point explanation, thanks….

  34. Pingback: Simple Methods For Writing Scalable CSS Now | Mouse Potato

  35. Jason says:

    so how do I make the comment boxes a different shade from comment to comment as they are on this site?

    • Ben Hunt says:

      It’s a feature of the theme we set up. I didn’t actually code it myself, so I can’t help further, sorry :-(

    • Gilbert Midonnet says:

      Look up jquery and pseudo codes and you can make every other comment a different color very easily.

      If you’ve never used javascript it won’t be *that* easy – but it will be a good project to help you learn CSS, pseudo codes and a bit of javascript.

  36. Gilbert Midonnet says:

    It’s easy to get started.

    1. Place

    p:nth-child(2n){
    background-color:#FFCC00;
    }
    in your style

    Make a few paragraphs. “p” and “/p”. You’ll see every other paragraph highlighted in yellow.

  37. Pingback: Creating a Nav Bar with HTML and CSS | Learn to Program

  38. Pingback: CSS: Page Layouts 系列 | Ian's Blog

  39. Clyde says:

    I needed a simple explanation and this was just perfect for me. Thank you much.