Grow your CSS skills. Land your dream job.

display

Last updated on:

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.


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.

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:


Don't count on it, though.

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.

More Information

Comments

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

  2. Lena
    Permalink to comment#

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

    It’s a great resource, thanks!

  3. jayesh
    Permalink to comment#

    Thanks,,it is good…

  4. It’s a great thanks :)

  5. Mono

    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!

    • Jesse

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

    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. laike9m
    Permalink to comment#

    Great article!

  8. sashwat

    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. Css-Tricks It´s awesome,I learn a lot here.

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

    • 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. Aldi Unanto
    Permalink to comment#

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

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

  13. 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. Rahul
    Permalink to comment#

    Good article. Keep posting…

  15. danglong
    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">
    </a>
    </td>
    </tr>

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

  17. Nitin Gautam
    Permalink to comment#

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

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

  19. Brian
    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?

    • 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. mehmet
    Permalink to comment#

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

  21. Ij888
    Permalink to comment#

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

  22. Shalu
    Permalink to comment#

    Loved this clear & concise explanation

Leave a Comment

Current day month ye@r *

*May or may not contain any actual "CSS" or "Tricks".