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.


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.


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.

The two elements with the red borders are <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.


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:

Don't count on it, though.


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.


The flow-root display value creates a new "block formatting context", but is otherwise like block. A new BFC helps with things like clearning floats, removing the need for hacks to do that.

.group {
  display: flow-root;

This browser support data is from Caniuse, which has more detail. A number indicates that browser supports the feature at that version and up.



Mobile / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox


Grid layout will also be initially set by the display property.

body {
  display: grid;

Here's our guide on Grid layout, which includes a browser support chart.


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

More Information


  1. User Avatar
    Permalink to comment#

    I think the logic behind “Masonry style layouts” is dispaly:run-in;

  2. User Avatar
    Permalink to comment#

    I’m frequently referring back to this article as I work.

    It’s a great resource, thanks!

  3. User Avatar
    Permalink to comment#

    Thanks,,it is good…

  4. User Avatar
    Permalink to comment#

    It’s a great thanks :)

  5. User Avatar

    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!

    • User Avatar

      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.

  6. User Avatar

    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.

  7. User Avatar
    Permalink to comment#

    Great article!

  8. User Avatar

    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.

  9. User Avatar
    Permalink to comment#

    Css-Tricks It´s awesome,I learn a lot here.

  10. User Avatar
    Craig Patik
    Permalink to comment#

    There is table-cell which acts like a <td>.
    There is table-row-group which acts like a <tbody>.
    There is table-header-group which acts like a <thead>.

    But why isn’t there a table-header-cell which acts like a <th>?

    • User Avatar
      Ted Kusio
      Permalink to comment#

      It seems that table-cell on a <th> cell w/in a <thead> row works like you the table-header-cell you suggest…

  11. User Avatar
    Aldi Unanto
    Permalink to comment#

    Table values. Great sample and easy to understand, Thanks for sharing

  12. User Avatar
    Abhishek Macwan
    Permalink to comment#

    Great resource. But I want to know about the inline-table value?

  13. User Avatar
    Under floden
    Permalink to comment#

    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.

  14. User Avatar
    Permalink to comment#

    Good article. Keep posting…

  15. User Avatar
    Permalink to comment#

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

  16. User Avatar
    Technology Garden
    Permalink to comment#

    Thanks to author. It’s a great article to understand completely about css “display ” properties.

  17. User Avatar
    Nitin Gautam
    Permalink to comment#

    How to wrap long text when we are displaying Divs as table cell?

    • User Avatar
      Permalink to comment#

      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)

  18. User Avatar
    Permalink to comment#

    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

  19. User Avatar
    Permalink to comment#

    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?

    • User Avatar
      Chris Coyier
      Permalink to comment#

      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.

  20. User Avatar
    Permalink to comment#

    if citation block colorize it’s gonna look better in my opinion.

  21. User Avatar
    Permalink to comment#

    Smashing and enlightening as usual, thanks for this awesome reference resource.

  22. User Avatar
    Permalink to comment#

    Loved this clear & concise explanation

  23. User Avatar
    Permalink to comment#

    This is very helpful article, by the way what is UA stylesheet overrides?

  24. User Avatar
    Permalink to comment#

    Very clear and concise with colourful code snippets to help.
    Thanks for clearing this up :)

    You rock Chris!

  25. User Avatar
    Permalink to comment#

    Cool yr, nice tick up on CSS display Block

  26. User Avatar
    Regine Heidorn
    Permalink to comment#

    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 :-(

  27. User Avatar

    pretty cool

  28. User Avatar
    Ayush Mukherje

    WOW! JUST WOW! Cleared all my doubts!!! Thanks for this wonderful article!

  29. User Avatar

    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

  30. User Avatar
    Permalink to comment#

    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!

  31. User Avatar
    Permalink to comment#

    good after noon

  32. User Avatar
    Permalink to comment#


  33. User Avatar
    Permalink to comment#

    it is very help bull

  34. User Avatar
    Permalink to comment#

    that was excellent, thank you very much

  35. User Avatar
    Amin Yusuf

    Thanksfull CSS-TRICK

  36. User Avatar

    Great article!,CSS-tricks is the first site I look for help and It does not disappoint.

  37. User Avatar
    Tony Brix

    You don’t mention being able to use two keywords as in display: inline flex; instead of display: inline-flex;


  38. User Avatar
    Mitra mirshafiee
    Permalink to comment#

    Hi! I have a little question in display values.
    Why doesn’t my paragraph get the total space and width of a page when i write it like this in CSS?

    Width:280 px;

    Although when i write a div like this it will get the whole width of the page.
    Please hepl me if u can!tnx in advance

    • User Avatar
      David Mead
      Permalink to comment#

      You have a space between ‘280’ and ‘px’. Get rid of that and all your paragraphs will only by 280px wide :-)

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.