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>
Alex Angas
  • 59,219
  • 41
  • 137
  • 210
user1929946
  • 2,453
  • 2
  • 15
  • 17

5 Answers5

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 */
Jay
  • 332
  • 1
  • 3
  • 10
Boaz
  • 19,892
  • 8
  • 62
  • 70
  • 8
    Thanks! There is also this notation in case horizontal and vertical space need to be diferent border-spacing: horizontal vertical; – Diego Quirós Feb 16 '14 at 02:13
  • And I thought I found a bug; turns out I need to learn more CSS. – Pete Alvin Jul 18 '14 at 02: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 04 '15 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 '15 at 09: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

urmurmur
  • 224
  • 4
  • 13
  • 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 '15 at 09: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... :(

Chris Happy
  • 7,088
  • 2
  • 22
  • 49
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!

user123_456
  • 5,635
  • 26
  • 84
  • 140
  • 11
    Ok, but what if he want two divs in equal height? Float can't do this. – hieroshima Jul 08 '14 at 08:21
  • And that's why [JS](https://css-tricks.com/equal-height-blocks-in-rows/) is awesome :) – Chris Happy Jan 26 '17 at 23:20
  • @ChrisHappy Never use JavaScript, when there is a CSS solution. Your code just gets bulky. – ssc-hrep3 Jun 19 '17 at 14:55
  • @ssc-hrep3 As responsiveness comes on demand, the bulky CSS solutions are no longer sufficient... – Chris Happy Jun 25 '17 at 02:29
  • 3
    They are sufficient - especially with responsive requirements. Just take a look at [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) which is now supported by [most of the major browsers](http://caniuse.com/#feat=flexbox) and solves this exact problem very easily. Layouting styles should never be done by JavaScript. – ssc-hrep3 Jun 25 '17 at 05:07
  • @ssc-hrep3 I am coming back to this in 2020 and realize how wrong I was. Sorry for my pride and thank you for your patience with me. – Chris Happy Jul 26 '20 at 05:41
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.

Saulius
  • 1,736
  • 20
  • 29