Space between divs - display table-cell

Question

I have two divs:

<div style="display:table-cell" id="div1"> content </div> <div style="display:table-cell" id="div2"> content </div> 

Is there a way to make space between these two divs (which have display:table-cell )?

Answer 1

You can use the border-spacing :

HTML:

 <div class="table"> <div class="row"> <div class="cell">Cell 1</div> <div class="cell">Cell 2</div> </div> </div> 

CSS

 .table { display: table; border-collapse: separate; border-spacing: 10px; } .row { display:table-row; } .cell { display:table-cell; padding:5px; background-color: gold; } 

Jsbin demo

Any other option?

Well, not quite.

Why?

• margin property is not applicable to display: table-cell elements.
• padding property does not create space between the edges of cells.
• float property destroys the expected behavior of table-cell elements, which can be as high as their parent element.

Answer 2

Use transparent borders if possible.

JSFiddle Demo

https://jsfiddle.net/74q3na62/

HTML

 <div class="table"> <div class="row"> <div class="cell">Cell 1</div> <div class="cell">Cell 2</div> <div class="cell">Cell 3</div> </div> </div> 

CSS

 .table { display: table; border: 1px solid black; } .row { display:table-row; } .cell { display: table-cell; background-clip: padding-box; background-color: gold; border-right: 10px solid transparent; } .cell:last-child { border-right: 0 none; } 

Description

You can use the border-spacing , but it not only creates space between the table cells, but also between the table cells and the table container.

If you do not need visible borders for your table cells, you should use transparent border to create field fields. Transparent borders require setting background-clip: padding-box; , because otherwise, the background color of the table cells is displayed on the border.

Transparent borders and background clip are supported in IE9 up (and in all other modern browsers). If you need compatibility with IE8 or you do not need a real transparent space, you can just set the border color to white and leave the background-clip out.

Answer 3

Create a new div with any name (I just use table splitting) and give it a width without adding content to it, placing it between the necessary divs that need to be divided.

You can add any required width. I only used 0.6% because this is what I needed when I had to do this.

 .table-split { display: table-cell; width: 0.6% } 

 <div class="table-split"></div> 

Answer 4

You can put your inline CSS styles in the css class. You can add space between two divs using css styles like padding: 5px or margin: 5px.

 <div class="tile"> content </div> <div class="tile"> content </div> .tile { display: table-cell; padding: 5px; }