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>
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=”#”>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 {
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=”#”>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
The Complete Pro Package…
Ben Hunt's Pro Web Design Alliance
Joining the Pro Web Design Alliance is your chance to be part of the new generation of successful online marketers and designers.
This exclusive group is truly unlike anything else in the world. As well as being first to get the latest thinking in online design and marketing, you'll also enjoy support to help make your business more profitable.
Alliance membership includes Ben Hunt's comprehensive “Pro Web Design Course”, plus many many other benefits.
The Must-Read... Save the Pixel - the Art of Simple Web Design
Save the Pixel is THE original and best guide to simple web design. This iconic book makes the fundamentals of web design easy to understand. (Now in its 2nd edition)
“Brillant, just brillant! Just what is needed! A must read for anyone who designs and develops web sites.”
“It has revolutionised the way that I think about websites and I only wish I could have read it sooner.”
MASTER Search Engine Optimisation
with SEO from Scratch
SEO from Scratch is the perfect guide to optimizing small business websites.
This new video series:
- Explains what SEO is all about, then
- Shows you exactly what to do and how to do it
- Plus — gives you free tools to do it
45 Comments Leave a comment
Leave a comment
actually there are more ways to display some elements, you can checkout on w3c docs…
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.
*edit
“I think you should change round the <div> and <p> example so it is actual valid code.
Thanks!! That helped a lot! Very clearly explained and exactlty what I wanted to know
.
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..
Pingback: A Flare for Help » Blog Archive » Text boxes in print output
very clearly explained it
thanks for the code.
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)
Pingback: Inline HTML List « Sanjay Vamja: The Techie
Pingback: JavaScript 101, Beginner's Guide to Learning Block / Inline JavaScript
Pingback: Spaces Between Images | My Monkey Do
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.
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.
Pingback: hover effekt verschieben - Seite 2 - XHTMLforum
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.
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.
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 >)
I think you can use float:left or float:right in the li to determinate the inline properties.
But thank for your tip
Actually, floats will just shift the vertical column left or right, not put the individual elements inline.
Correct.
Pingback: What is the different between CSS Block and Inline CSS Display Styles [closed] | SeekPHP.com
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.
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.
Pingback: What use does the CSS display value 'inline-block' have? - Quora
Pingback: Floating right an image alongside a H3 tag | SeekPHP.com
Pingback: lindanisbett.com » Blog Archive » Resource Links for November
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.
Pingback: Awesome CSS Resources : It Does Not Follow
I’m new in web design this article was very helpful for me.
thanks
Pingback: MySource Matrix – Content Types | Locksmack
oh ben thank youuuu. it’s very easy
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.
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!
Check this page some design issue is there.When scroll down books sections are overlap with footer section.
It looks OK to me. What browser are you using?
Good page, nice and clear. Needs a mension that ie and everyone else renders these differently and ie hacks are usually needed.
Pingback: JavaScript 101: Hello World! » iwtacademy.in
Hi, clear n to the point explanation, thanks….
Pingback: Simple Methods For Writing Scalable CSS Now | Mouse Potato
so how do I make the comment boxes a different shade from comment to comment as they are on this site?
It’s a feature of the theme we set up. I didn’t actually code it myself, so I can’t help further, sorry
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.
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.
Thanks Gilbert that helped alot!