div प्रदर्शित क्यों करता है: तालिका-पंक्ति मार्जिन को अनदेखा करती है?

Question

निम्नलिखित एचटीएमएल मार्जिन-टॉप से ​​अलग होने के कारण तालिका पंक्ति div द्वारा पूरी तरह अनदेखा किया जा रहा है। और मैं समझ नहीं सकता क्यों।

<div class='table'> 

    <div class='margin-top5 row user' id='user_113'> 
    <div class='cell left avatar margin-right5'><img alt="Blank_avatar_thumb" src="/images/blank_avatar_thumb.png?1295354025" /></div> 
    <div class='cell left'> 
     <div class='bold'><a href="/voisins/113">Dandre</a></div> 
     <div class='small of_hidden'>toothpicking, veryveryveryveeerrrryyyyyylooooooooong, kidnapping...</div> 
    </div> 
    <div class='cell right'>42</div> 

    <div class='clear'></div> 
    </div> 
    /* more rows */ 
</div> 

सीएसएस:

div.table { 
    display: table; 
    width: 100%; 
} 
div.row { 
    display: table-row; 
} 
div.cell { 
    display: table-cell; 
} 
div.left { 
    float: left; 
} 
div.right { 
    float: right; 
} 
div.clear { 
    clear: both; 
} 
.avatar { 
    vertical-align: middle; 
} 
.margin-top5 { 
    margin-top: 5px; 
} 
.margin-right5 { 
    margin-right: 5px; 
} 
.bold { 
    font-weight: bold; 
} 
.of_hidden { 
    overflow: hidden; 
} 
.small { 
    font-size: 0.8em; 
} 
body, p, ol, ul, td { 
    font-family: verdana, arial, helvetica, sans-serif; 
    font-size: 13px; 
    line-height: 18px; 
} 

संपादित:

अगर मैं पंक्ति div से .row वर्ग निकालने के लिए, यह मार्जिन टॉप उठा शुरू होता है। display: table-row; आप एक tr, tr 'की तरह व्यवहार करने के लिए एक margin ... या padding नहीं है div कह रहे हैं:

Answer 1

यह cullprit है।

आप padding को td पर लागू कर सकते हैं, लेकिन margin नहीं।

Answer 2

सीमा-दूरी का उपयोग करें: 10px; प्रदर्शन के साथ div के लिए: तालिका;

संदर्भ के लिए इस लिंक का उपयोग करें: space between divs - display table-cell