224

I have div elements next to each other with display: table-cell;.

I want to set margin between them, but margin: 5px has no effect. Why?

My code:

<div style="display: table-cell; margin: 5px; background-color: red;">1</div>
<div style="display: table-cell; margin: 5px; background-color: green;">1</div>
0

5 Answers 5

325

Cause

From the MDN documentation:

[The margin property] applies to all elements except elements with table display types other than table-caption, table and inline-table

In other words, the margin property is not applicable to display:table-cell elements.

Solution

Consider using the border-spacing property instead.

Note it should be applied to a parent element with a display:table layout and border-collapse:separate.

For example:

HTML

<div class="table">
    <div class="row">
        <div class="cell">123</div>
        <div class="cell">456</div>
        <div class="cell">879</div>
    </div>
</div>

CSS

.table {display:table;border-collapse:separate;border-spacing:5px;}
.row {display:table-row;}
.cell {display:table-cell;padding:5px;border:1px solid black;}

See jsFiddle demo


Different margin horizontally and vertically

As mentioned by Diego Quirós, the border-spacing property also accepts two values to set a different margin for the horizontal and vertical axes.

For example

.table {/*...*/border-spacing:3px 5px;} /* 3px horizontally, 5px vertically */
4
  • 8
    Thanks! There is also this notation in case horizontal and vertical space need to be diferent border-spacing: horizontal vertical; Feb 16, 2014 at 2:13
  • And I thought I found a bug; turns out I need to learn more CSS.
    – Pete Alvin
    Jul 18, 2014 at 2:16
  • I guess this doesn't really handle specific left/right/top/bottom margins though? And no way to have a specific table-cell have different padding from the rest?
    – Nathan
    Feb 4, 2015 at 18:34
  • @Nathan padding can be set for any selector necessary (e.g. class or id), as usual. If you mean the margin between the cells, then that can be set separately for the vertical and horizontal axes by setting two values to border-spacing, but it will apply to the entire table and not to individual cells.
    – Boaz
    Feb 19, 2015 at 9:04
23

You can use inner divs to set the margin.

<div style="display: table-cell;">
   <div style="margin:5px;background-color: red;">1</div>
</div>
<div style="display: table-cell; ">
  <div style="margin:5px;background-color: green;">1</div>
</div>

JS Fiddle

1
  • 2
    This is a good idea if you want margin between the cells but not left or right of them. Then your CSS could be something like .inner-div { margin-right: 5px; } .outer-cell:last-child .inner-div { margin-right: 0; }. But also note this gotcha: the red and green backgrounds of this example won't necessarily match in height since they're not on the cells.
    – Henrik N
    Apr 21, 2015 at 9:05
10

Table cells don't respect margin, but you could use transparent borders instead:

div {
  display: table-cell;
  border: 5px solid transparent;
}

Note: you can't use percentages here... :(

2

If you have div next each other like this

<div id="1" style="float:left; margin-right:5px">

</div>
<div id="2" style="float:left">

</div>

This should work!

6
  • 11
    Ok, but what if he want two divs in equal height? Float can't do this.
    – hieroshima
    Jul 8, 2014 at 8:21
  • And that's why JS is awesome :) Jan 26, 2017 at 23:20
  • @ChrisHappy Never use JavaScript, when there is a CSS solution. Your code just gets bulky.
    – ssc-hrep3
    Jun 19, 2017 at 14:55
  • @ssc-hrep3 As responsiveness comes on demand, the bulky CSS solutions are no longer sufficient... Jun 25, 2017 at 2:29
  • 3
    They are sufficient - especially with responsive requirements. Just take a look at flexbox which is now supported by most of the major browsers and solves this exact problem very easily. Layouting styles should never be done by JavaScript.
    – ssc-hrep3
    Jun 25, 2017 at 5:07
0

I was also looking how to use display: table-cell; (so to make equal height) and also have left-margin. No proposed solutions worked for me. So I came to my dump workaround - I just added one more span with display: table-cell; with width of the size required margin. Not elegant but it works.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.