Make sure you don't miss the latest insights and tips. Click here to sign up for my mailing list now! »

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

 

 

 

 

About the author

Ben Hunt

Ben is the creator of Web Design From Scratch. He started writing articles about web design to kill time on a long train commute, and is now one of the most influential figures on the subject of effective web design. He has written three books and spoken at multiple conferences internationally.

Renyo Borges - 4 years ago

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

Jason - 4 years ago

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.

Jason - 4 years ago

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

Sam Thunderbolt - 4 years ago

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

Hemang Bavishi - 4 years ago

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

kanika - 4 years ago

very clearly explained it

Prof.Yeow - 3 years ago

thanks for the code.

Daniel Ziegler - 3 years ago

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)

Peka - 3 years ago

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 - a couple of years ago

    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.

LD - 3 years ago

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.

Helen Neely - 3 years ago

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 - a couple of years ago

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

juanma - 3 years ago

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 - a couple of years ago

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

      Ben Hunt - a couple of years ago

      Correct.

Muzietto - a couple of years ago

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 - a couple of years ago

    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.

bitoolean - a couple of years ago

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.

manochehr - a couple of years ago

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

Haftegi - a couple of years ago

oh ben thank youuuu. it’s very easy

Markandey Gupta - a couple of years ago

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.

kyle - a couple of years ago

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!

Manimaran - a couple of years ago

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

    Ben Hunt - a couple of years ago

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

JamieD - a couple of years ago

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

sopier - last year

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

Jason - last year

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

    Ben Hunt - last year

    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 - last year

    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.

Gilbert Midonnet - last year

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.

    Jason - last year

    Thanks Gilbert that helped alot!

Clyde - 10 months ago

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

Comments are closed