Space Between Divs - Display Table-Cell

space between divs - display table-cell

You can use border-spacing property:

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 really.

Why?

• margin property is not applicable to display: table-cell elements.
• padding property doesn't create space between edges of the cells.
• float property destroys the expected behavior of table-cell elements which are able to be as tall as their parent element.

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

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

margin between two display table-cell

You need to put the border-spacing and border-collapse rules on the parent div, not the table-cell divs.

Unwanted spacing with css display and table-cell

Inline elements (in your case the .button divs) are sensitive to white space, you can get rid of that space in a variety of ways, including:

• Removing the space between the elements
• Using HTML comments (<!-- -->) to occupy the gap
• Floating the elements left

Example of removing the white space between elements:

<div class="widget">
    <div class="button">
        <div class="content">
            <div class="icon">A</div>
            <div class="label">ABC</div>
        </div>
    </div><div class="button">
        <div class="content">
            <div class="icon">B</div>
            <div class="label">ABCDEF</div>
        </div>
    </div><div class="button">
        <div class="content">
            <div class="icon">C</div>
            <div class="label">ABCDEFGHI</div>
        </div>
    </div>
</div>

jsFiddle example

Example of using HTML comments:

<div class="widget">
    <div class="button">
        <div class="content">
            <div class="icon">A</div>
            <div class="label">ABC</div>
        </div>
    </div><!--
    --><div class="button">
        <div class="content">
            <div class="icon">B</div>
            <div class="label">ABCDEF</div>
        </div>
    </div><!--
    --><div class="button">
        <div class="content">
            <div class="icon">C</div>
            <div class="label">ABCDEFGHI</div>
        </div>
    </div>
</div>

jsFiddle example

Example of using float:

.button {
    display:inline-block;
    border:1px solid red;
    margin:0px;
    padding:0px;
    float:left;
}

jsFiddle example

So in short this really doesn't have to do with display:table-cell but everything to do with display:inline and inline-block.

Cell spacing in div table

Add border-spacing: 4px; to your .TableBox class instead of your <tr>

Fiddle: http://jsfiddle.net/EJBnm/1/

remove space between display:table-cell

When you assign css rule display:table-cell to any element, it behaves as any td element of some table. So, in that case, it auto adjusts itself according to the parent width and the number of other tds in the same row, only when, you don't specify a width to this td.

That's why both your span cum TDs are taking that width.
simply assign a width to the first one, it should solve your problem.

i.e. try adding this class

.statusCommentUser span:first-child{
    width:50px;
}

see the demo

Moreover, if all that you want is to position your image span and text span horizontally aligned, you can do it through many other ways i.e. change your css classes to this:

.statusCommentUser {
    width:450px;
    height:50px;
 }
.statusCommentUser span {
  float:left;
 }
.statusCommentUser span:last-child{
    position:relative;
    top:40px;
}

see this demo

display: table-cell margins

Try to use Flexbox (flexbox) to separate child elements

div.table {
    display: flex;
    justify-content: space-between;
}

JSFiddle

Why is there an extra space in table-cell div?

It's because of the default margin on the nested ul.menu element. Since you probably don't want to remove that, you could add vertical-align: top to the #left element. In doing so, the #right element's alignment will not correspond to the baseline of the aforementioned ul.menu element's text.

Working Example

#left {
  display: table-cell;
  vertical-align: top; /* Added.. */
  width: 200px;
  height: 350px;
  background: #FFF;
  border-right: 1px solid rgb(180, 180, 180);
}

Space between CSS Table Rows

Use border-spacing to create the spacing.

And if you want the gaps to have no background color, move the background-color from the table to the table-rows.

.live-mu-table {  display: table;  margin-bottom: 5px;  padding-bottom: 5px;  position: relative;  margin-left: auto;  margin-right: auto;  width: 75%;  border-spacing: 0 3px;     /* new */}.live-mu-table-tr {  display: table-row;  height: 30px;  background-color: Azure;   /* moved */}.live-mu-table-tdq {  display: table-cell;  border: 1px solid #000;  width: 60%;  text-align: center;  vertical-align: middle;  cursor: pointer;}.live-mu-table-tda {  display: table-cell;  border: 1px solid #000;  width: 30%;  text-align: center;  vertical-align: middle;  cursor: pointer;}.live-mu-table-tdspacer1 {  display: table-cell;  border: 1px solid #000;  width: 10%;  text-align: center;  vertical-align: middle;}

<div class="live-mu-table">  <div class="live-mu-table-tr">    <div class="live-mu-table-tdq" id="a-1">q1</div>    <div class="live-mu-table-tdspacer1"></div>    <div class="live-mu-table-tda" id="a-3">A3</div>  </div>
  <div class="live-mu-table-tr">    <div class="live-mu-table-tdq" id="q-2">q2</div>    <div class="live-mu-table-tdspacer1"></div>    <div class="live-mu-table-tda" id="a-1-2">A1</div>  </div>
  <div class="live-mu-table-tr">    <div class="live-mu-table-tdq" id="q-3">q3</div>    <div class="live-mu-table-tdspacer1"></div>    <div class="live-mu-table-tda" id="a-2">A2</div>  </div></div>