display
Every element on a web page is a rectangular box. The display property in CSS determines just how that rectangular box behaves. There are only a handful of values that are commonly used:
div {
display: inline; /* Default of all elements, unless UA stylesheet overrides */
display: inline-block; /* Characteristics of block, but sits on a line */
display: block; /* UA stylesheet makes things like <div> and <section> block */
display: run-in; /* Not particularly well supported or common */
display: none; /* Hide */
}The default value for all elements is inline. Most "User Agent stylesheets" (the default styles the browser applies to all sites) reset many elements to "block". Let's go through each of these, and then cover some of the other less common values.
Inline
The default value for elements. Think of elements like <span>, <em>, or <b> and how wrapping text in those elements within a string of text doesn't break the flow of the text.
The
<em> element has a 1px red border. Notice it sits right inline with the rest of the text.An inline element will accept margin and padding, but the element still sits inline as you might expect. Margin and padding will only push other elements horizontally away, not vertically.
An inline element will not accept height and width. It will just ignore it.
Inline Block
An element set to inline-block is very similar to inline in that it will set inline with the natural flow of text (on the "baseline"). The difference is that you are able to set a width and height which will be respected.
Block
A number of elements are set to block by the browser UA stylesheet. They are usually container elements, like <div>, <section>, and <ul>. Also text "blocks" like <p> and <h1>. Block level elements do not sit inline but break past them. By default (without setting a width) they take up as much horizontal space as they can.
<p>s which are block level elements. The <em> element in between them doesn't sit inline because the blocks break down below inline elements.Run-in
First, this property doesn't work in Firefox. Word is that the spec for it isn't well defined enough. To begin to understand it though, it's like if you want a header element to sit inline with the text below it. Floating it won't work and neither will anything else, as you don't want the header to be a child of the text element below it, you want it to be its own independent element. In "supporting" browsers, it's like this:
None
Totally removes the element from the page. Note that while the element is still in the DOM, it is removed visually and any other conceivable way (you can't tab to it or its children, it is ignored by screen readers, etc).
Table Values
There is a whole set of display values the force non-table elements to behave like table-elements, if you need that to happen. It's rare-ish, but it sometimes allows you to be "more semantic" with your code while utilizing the unique positioning powers of tables.
div {
display: table;
display: table-cell;
display: table-column;
display: table-colgroup;
display: table-header-group;
display: table-row-group;
display: table-footer-group;
display: table-row;
display: table-caption;
}To use, just mimic normal table structure. Simple example:
<div style="display: table;">
<div style="display: table-row;">
<div style="display: table-cell;">
Gross but sometimes useful.
</div>
</div>
</div>Flexbox
The display property is also used for new fangled layout methods like Flexbox.
.header {
display: flex;
}There are some older versions of flexbox syntax, so please consult this article for the syntax in using flexbox with the best browser support. Be sure to see this complete guide to Flexbox.
Grid
Grid layout will also be initially set by the display property.
body {
display: grid;
}Although at the time of this update, only IE 10 is supporting it. Here's the spec on grids.
I think the logic behind “Masonry style layouts” is dispaly:run-in;
I’m frequently referring back to this article as I work.
It’s a great resource, thanks!
Thanks,,it is good…
It’s a great thanks :)
ggfffgfgfgfgfg
Thanks Chris!
I don’t know why I chose this article to finally post a comment, but I’ve been reading your articles for a while now and they all shed light on the little details that aren’t always covered by other sites and bloggers.
Keep up the awsome work!
I agree, Chris Coyier rarely misses a detail, which is one of the reasons css-tricks.com is one of those ‘go-to-first’ sites for me. That, and he uses down-to-earth language. I’ve watched a couple of his iTunes screencasts (video podcasts) and it’s great to hear the voice of these tutorials.
Thanks Chris – your insights and explanations are always helpful and this one particularly.
I’m working on a layout that uses multiple divs floated alongside each other inside a div that is wider than the viewport. I don’t want the contents to wrap so am using white-space:nowrap; to prevent that. However, this is causing problems within some of the divs (e.g. type formatting).
I know it’s generally not recommended but could this be a situation in which to use the display: table; style?
Thanks again.
Great article!
Thanks a lot chris. Your posts are simply awesome for learning . And about this article,its nice one.Just a small typo though, Under Table Values, “There is a whole set of display values the force non-table elements to behave like table-elements”,the should be that i guess.
Css-Tricks It´s awesome,I learn a lot here.
There is
table-cellwhich acts like a<td>.There is
table-row-groupwhich acts like a<tbody>.There is
table-header-groupwhich acts like a<thead>.But why isn’t there a
table-header-cellwhich acts like a<th>?It seems that
table-cellon a<th>cell w/in a<thead>row works like you thetable-header-cellyou suggest…Table values. Great sample and easy to understand, Thanks for sharing
Great resource. But I want to know about the inline-table value?
Hey! I recently would love to provide significant thumbs up for your own wonderful details you’ve here at this article. We have been returning to your page to become more soon.
Good article. Keep posting…
<tr style="margin-bottom:0"><td align="left" valign="top">
<a href="http://www.tripadvisor.com" target="_blank" style="display:table-caption; vertical-align:text-top">
<img alt="" src="images/image.jpg" width="600" height="367" style="display:block">
</a>
</td>
</tr>
Thanks to author. It’s a great article to understand completely about css “display ” properties.
How to wrap long text when we are displaying Divs as table cell?
You have to set specifically set the word-wrap property for the table (doesn’t matter where as long as it’s above the element you want to wrap)
Hi, I love this article and come back often to refer to it but I ask why there is this code in the right top side where the ad is that is giving errors? Block to block do not match protocols, domains and so on. It is all kind of rubbish to me. I hope you can tell me what this is all about. It occurs in every browser. At first I thought it had to do with outbound linking, and then I thought it is the wrong browser, maybe the account was cancelled, or is it just me that is seeking for nice coding? I am curious what t he answers will be. In my ads farm or if ram the ads don’t show, the same code though.
Invalid CSS property declaration at: *
Blocked a frame with origin “http://www.google.nl” from accessing a frame with origin “http://css-tricks.com”. Protocols, domains, and ports must match.
Blocked a frame with origin “http://css-tricks.com” from accessing a frame with origin “http://www.google.nl”. Protocols, domains, and ports must match.
Greetings from
Henk
farm or if ram = frame or iframe I meant, sorry
I’ve seen several websites that set the display property to block for section, footer, aside and other block elements. Is there a reason you’d want to do this?
It’s a legacy thing when HTML5 elements just kinda “came out” – user agent stylesheets treated them like inline elements – but we knew in the future they were going to be block. Might as well do it right from the get-go.
if citation block colorize it’s gonna look better in my opinion.
Smashing and enlightening as usual, thanks for this awesome reference resource.
Loved this clear & concise explanation
This is very helpful article, by the way what is UA stylesheet overrides?
Very clear and concise with colourful code snippets to help.
Thanks for clearing this up :)
You rock Chris!
Cool yr, nice tick up on CSS display Block
The explanation on display: inline-block is missing a word on the inline-block-bug. Which I see as a shame for every browser-vendor since as long as 1995. Seriously, is that real, that the rendering of HTML-Elements depends on white-spaces, line-breaks or indentations used in the source code? Inline-block is a great way to realise multi-columns and grids if it weren’t for these nasty empty HTML-comments one needs to use :-(
pretty cool
WOW! JUST WOW! Cleared all my doubts!!! Thanks for this wonderful article!
Hi Geeks! Anybody know where I can found clear explanation about exact behavior (I know that isn’t margin collapse but very similar and I know how it works, but only by practice) inline-blocks elements in my simple example? http://codepen.io/dagolinuxoid/pen/yNazKM
Hi there! lets go deeper… when trying to mix the Display property whith for example, Position or Float. are there some tricks to have in mind? Thank you guys!
good after noon
funny
it is very help bull
that was excellent, thank you very much
Thanksfull CSS-TRICK
Great article!,CSS-tricks is the first site I look for help and It does not disappoint.