CSS layouting. Why table-row not accepting margin ?

Question

Hello, I have this css

<style>
.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;
}
</style>

And the following html

<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

Have you tried setting the bottom margin to .row div, i.e. to your "cells"? When you work with actual HTML tables, you cannot set margins to rows, too - only to cells.

Answer 2

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 3

The closest thing I've seen would be to set border-spacing: 0 30px; to the container div. However, this just leaves me with space on the upper edge of the table, which defeats the purpose, since you wanted margin-bottom.

Answer 4

Thank you so much for this! It was killing me too... Julian your method works for me.