CSS table layout: why does table-row not accept a margin?

Question

.container {    width: 850px;    padding: 0;    display: table;    margin-left: auto;    margin-right: auto;  }  .row {    display: table-row;    margin-bottom: 30px;    /* HERE */  }  .home_1 {    width: 64px;    height: 64px;    padding-right: 20px;    margin-right: 10px;    display: table-cell;  }  .home_2 {    width: 350px;    height: 64px;    padding: 0px;    vertical-align: middle;    font-size: 150%;    display: table-cell;  }  .home_3 {    width: 64px;    height: 64px;    padding-right: 20px;    margin-right: 10px;    display: table-cell;  }  .home_4 {    width: 350px;    height: 64px;    padding: 0px;    vertical-align: middle;    font-size: 150%;    display: table-cell;  }

<div class="container">    <div class="row">      <div class="home_1"></div>      <div class="home_2"></div>      <div class="home_3"></div>      <div class="home_4"></div>    </div>      <div class="row">      <div class="home_1"></div>      <div class="home_2"></div>    </div>  </div>

My question is relative to the line marked HERE in the CSS. I found out that the rows are too near to each other, so I tried to add a bottom margin to separate them. Unfortunately it does not work. I have to add the margins to the table cells to separate the rows.

What is the reason behind this behavior?

Also, is it ok to use this strategy to perform layouting as I am doing:

[icon] - text      [icon] - text [icon] - text      [icon] - text 

or is there a better strategy?

Answer 1

See the CSS 2.1 standard, section 17.5.3. When you use display:table-row, the height of the DIV is solely determined by the height of the table-cell elements in it. Thus, margin, padding, and height on those elements have no effect.

http://www.w3.org/TR/CSS2/tables.html

Answer 2

How's this for a work around (using an actual table)?

table {     border-collapse: collapse; }  tr.row {     border-bottom: solid white 30px; /* change "white" to your background color */ } 

It's not as dynamic, since you have to explicitly set the color of the border (unless there's a way around that too), but this is something I'm experimenting with on a project of my own.

Edit to include comments regarding transparent:

tr.row {     border-bottom: 30px solid transparent; }