Unable to give spaces between divs when used display:table-cell

Question

I want to align 3 divs, next to each other. so I used display:table to the parent div and display:table-cell to the inner 3 divs.

Width of first 2 div is known and width of 3rd div is unknown. So the use of display:table-cell works perfectly for me to adjust the width of 3rd div.

Now if I want to give spacing between 3 divs using margin-left or margin-right, then there is no effect. Please check code here.

Let me know if we can do that. Thanks in advance.

possible duplicate of [space between divs - display table-cell](http://stackoverflow.com/questions/18346083/space-between-divs-display-table-cell) — Hashem Qolami, Feb 23 '14 at 14:11

score 1 · Answer 1 · answered Jul 06 '12 at 11:03

This should work:

 #wrapper div {
      display: table-cell;
      height:100px;
      /* creates space */
      border:5px solid transparent;
      background-clip:padding-box;
  }

You might want to set a different box-modell to include the border in the width of the elements via:

box-sizing:border-box;

score 0 · Answer 2 · 2012-07-06T11:03:14.753

0

Use border property to give space like

border:solid 10px transparent;

edited Jul 06 '12 at 11:03

answered Jul 06 '12 at 10:58

this won't help, since outline occupies no space. – Christoph Jul 06 '12 at 10:59

score 0 · Answer 3 · answered Jul 06 '12 at 11:11

0

Try this

#wrapper {
    display: table;
    table-layout: fixed;
    width:100%;
    height:100px;
    background-color:Gray;
    border-spacing:10px;
}

DEMO.

answered Jul 06 '12 at 11:11

The Alpha

138,380
26
281
300

Your solution works but I just want spacing between one and two & two and three. Like this - http://jsbin.com/avozik/9/edit#preview – Ashwin Jul 06 '12 at 11:29
I think it's not possible using `table-cell`. – The Alpha Jul 06 '12 at 11:38

score 0 · Answer 4 · answered Jul 10 '13 at 07:04

0

Table cells cannot have margins. You can tweak it a bit by using transparent borders and if that doesn't solve your problem then there's no other way.

answered Jul 10 '13 at 07:04

Chankey Pathak

20,204
11
77
126

Unable to give spaces between divs when used display:table-cell

4 Answers4