css - Why doesn't margin hold for td? -

this question has answer here:

• why margin padding doesn't work in table td , tr? 3 answers

i have spent last several hours trying understand why margin css property (at least) td elements ignored.

for example, fiddle shows "simulation" of table row using div elements, followed "real" table element single tr. (i give full code @ end of post.) div simulates tr has been given class tr, and, similarly, divs simulate tds have been given class td. css div.tr has been kept close possible tr (the exceptions css directives not apply tr in case). similarly, css div.td , td should identical. in particular:

div.td,td{border:1px solid black;} div.td,td{margin:15px;padding:5px} 

furthermore, each div.td , each td contains empty div element, following dimensions:

div.td > div,td > div{width:90px;height:60px;} 

as can see, css specs both div.td , td elements have same margin, border, , padding specs, , have contents of identical dimensions. yet, shown in image below, div.td elements show specified margin , border. td, both of these dimensions 0. (also, puzzling fact border specified div.tr element visible, not identically-specified 1 tr element.)

the top row "simulation" using divs, bottom row comes bona fide table element row. light-brown region visible in top row corresponds specified 15px margin. green region (visible in both "simulated" , "real" table cells) corresponds specified 5px padding.

i want understand why inconsistency of behavior

...but have not been able find explanation. in other words, what rationale/motivation inconsistency. or @ least, how have found out official css rules responsible apparent inconsistency. (i did search this, did not find it. more specifically, did find implied—by omission—that there should no difference between 2 cases shown above.)

(everything have found have been, @ best, recipes how achieve particular effect, these recipes shed no light on question of inconsistency of behavior. such solutions superficial band-aids, because don't fix underlying lack of understanding leads question in first place.)

---

ok, here's code alluded above, promised:

css

/* basic reset */ body{background:white;} html,body,div,table,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0} table{border-collapse:collapse;border-spacing:0;} /* demo-specific css begins here */ div.tr{display:table;} div.tr,tr{border:1px solid #ee0000;} div.tr,tr{background:#e8b36d;} div.td{float:left;display:inline;} table{clear:both;} div.td,td{border:1px solid black;} div.td,td{background:#409152;} div.td,td{margin:15px;padding:5px} div.td > div,td > div{background:#1e4c6d;} div.td > div,td > div{width:90px;height:60px;} 

html

<div class="tr">  <div class="td">   <div></div>  </div>  <div class="td">   <div></div>  </div> </div>  <table>  <tr>   <td><div></div></td>   <td><div></div></td>  </tr> </table> 

because that's spec dictates.

17.5 visual layout of table contents

internal table elements generate rectangular boxes content , borders. cells have padding well. internal table elements not have margins.

_{(emphasis added)}