Why is a div with "display: table-cell;" not affected by margin?

Question

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>

Yorgos

Answer 1

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

Schatz

Thanks! There is also this notation in case horizontal and vertical space need to be diferent border-spacing: horizontal vertical; – Edlun

And I thought I found a bug; turns out I need to learn more CSS. – Coleman

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? – Midtown

@Midtown 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. – Schatz

What you posted works. But I actually would like to have border-spacing-top - but that doesn't exist. So I will need to keep looking for a better solution. – Wandy

Answer 2

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

Hairston

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. – Midi

Answer 3

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

Sino

Answer 4

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!

Quinquevalent

Ok, but what if he want two divs in equal height? Float can't do this. – Jacquijacquie

And that's why JS is awesome :) – Sino

@ChrisHappy Never use JavaScript, when there is a CSS solution. Your code just gets bulky. – Ineffectual

@Ineffectual As responsiveness comes on demand, the bulky CSS solutions are no longer sufficient... – Sino

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. – Ineffectual

@Ineffectual 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. – Sino

Answer 5

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.

Sesquiplane