I have spent the last several hours trying to understand why the margin CSS property (at least) for td elements is basically ignored.
For example, this fiddle shows a "simulation" of a table row using div elements, followed by a "real" table element with a single tr. (I give the full code for all this at the end of this post.) The div that simulates a tr has been given class TR, and, similarly, the divs that simulate tds have been given class TD. The CSS for div.TR has been kept as close as possible to that for tr (the only exceptions are those CSS directives that do not apply to tr in this case). Similarly, the CSS for div.TD and td should be almost identical. In particular:
div.TD,td{border:1px solid black;}
div.TD,td{margin:15px;padding:5px}
Furthermore, each div.TD and each td contains an empty div element, with the following dimensions:
div.TD > div,td > div{width:90px;height:60px;}
As you can see, the CSS specs for both div.TD and td elements have the same margin, border, and padding specs, and have contents of identical dimensions. Yet, as shown in the image below, only the div.TD elements show the specified margin and border. For the td, both of these dimensions are effectively 0. (Also, similarly puzzling is the fact that the border specified for the div.TR element is visible, but not the identically-specified one for the tr element.)
The top row is the "simulation" using divs, the bottom row comes from a bona fide table element row. The light-brown region visible in the top row corresponds to the specified 15px margin. The green region (visible in both the "simulated" and "real" table cells) corresponds to the specified 5px padding.
I want to understand why this inconsistency of behavior
...but I have not been able to find any explanation. In other words, what is the rationale/motivation for this inconsistency. Or at least, how could I have quickly found out the official CSS rules responsible for this apparent inconsistency. (I did search for this, but I did not find it. More specifically, what I did find implied—by omission—that there should be no difference between the two cases shown above.)
(Everything I have found have been, at best, recipes for how to achieve a particular effect, but these recipes shed no light on the question of the inconsistency of behavior. Such solutions are basically superficial band-aids, because they don't fix the underlying lack of understanding that leads to the question in the first place.)
OK, here's the code alluded to above, as 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>
