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.


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.


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


  1. Samiullah
    Permalink to comment#

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

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

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

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

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

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

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

  16. Technology Garden
    Permalink to comment#

    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?

    • ParmesanPangolin
      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. Hank
    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. 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?

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

  23. Rajendra
    Permalink to comment#

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

  24. Ronan
    Permalink to comment#

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

    You rock Chris!

  25. Nalini
    Permalink to comment#

    Cool yr, nice tick up on CSS display Block

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

    pretty cool

  28. Ayush Mukherje

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

  29. daGo

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

    good after noon

  32. parveen
    Permalink to comment#


  33. block
    Permalink to comment#

    it is very help bull

  34. mehdi
    Permalink to comment#

    that was excellent, thank you very much

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

  function example() {
    element.innerHTML = "<div>code</div>";

We have a pretty good* newsletter.