CSS Help

I would like to apply a margin between rows so that the label background colors do not touch, yet when I add in a margin statement to the rows nothing seems to happen? Why is this? Here is a sample of what I am talking about: Relevant HTML: <div style="width: 55%;"> <div> <div>Defenses & Maneuverability</div> <div> <div> <span>Type</span> <span>Total</span> <span></span> <span></span> <span></span> <span>Armor</span> <span>Dexterity</span> <span>Size</span> <span>Natural</span> <span>Deflection</span> <span>Misc</span> </div> <div> <span>AC</span> <span><input title="total-ac" type="number" name="attr_total-ac" value="0" disabled></span> <span style="font-size: 140%; vertical-align: middle; width: 25px;">=</span> <span style="width: 30px; font-weight: bold; font-size: 140%; vertical-align: middle;">10</span> <span style="font-size: 140%; vertical-align: middle; width: 25px;">+</span> <span><input title="armor-ac" type="number" name="attr_armor-ac" value="0"></span> <span><input title="dex-ac" type="number" name="attr_dex-ac" value="0"></span> <span><input title="size-ac" type="number" name="attr_size-ac" value="0"></span> <span><input title="natural-ac" type="number" name="attr_natural-ac" value="0"></span> <span><input title="deflection-ac" type="number" name="attr_deflection-ac" value="0"></span> <span><input title="misc-ac" type="number" name="attr_misc-ac" value="0"></span> </div> <div> <span style="font-size: 100%;">TOUCH</span> <span><input title="total-ac" type="number" name="attr_total-ac" value="0" disabled></span> <span style="font-size: 140%; vertical-align: middle; width: 25px;">=</span> <span style="width: 30px; font-weight: bold; font-size: 140%; vertical-align: middle;">10</span> <span style="font-size: 140%; vertical-align: middle; width: 25px;">+</span> <span><input title="armor-ac" type="number" name="attr_armor-ac" value="0"></span> <span><input title="dex-ac" type="number" name="attr_dex-ac" value="0"></span> <span><input title="size-ac" type="number" name="attr_size-ac" value="0"></span> <span><input title="natural-ac" type="number" name="attr_natural-ac" value="0"></span> <span><input title="deflection-ac" type="number" name="attr_deflection-ac" value="0"></span> <span><input title="misc-ac" type="number" name="attr_misc-ac" value="0"></span> </div> <div> <span style="font-size: 100%;">FLAT<br>FOOTED</span> <span><input title="total-ac" type="number" name="attr_total-ac" value="0" disabled></span> <span style="font-size: 140%; vertical-align: middle; width: 25px;">=</span> <span style="width: 30px; font-weight: bold; font-size: 140%; vertical-align: middle;">10</span> <span style="font-size: 140%; vertical-align: middle; width: 25px;">+</span> <span><input title="armor-ac" type="number" name="attr_armor-ac" value="0"></span> <span><input title="dex-ac" type="number" name="attr_dex-ac" value="0"></span> <span><input title="size-ac" type="number" name="attr_size-ac" value="0"></span> <span><input title="natural-ac" type="number" name="attr_natural-ac" value="0"></span> <span><input title="deflection-ac" type="number" name="attr_deflection-ac" value="0"></span> <span><input title="misc-ac" type="number" name="attr_misc-ac" value="0"></span> </div> </div> </div> </div> Relevant CSS: .sheet-section-wrapper { float: left; width: 100%; } .sheet-section-title { text-align: center; font-weight: bold; color: white; text-transform: uppercase; width: 100%; background: #0c24ff; /* Old browsers */ background: -moz-linear-gradient(top, #0c24ff 0%, #000556 91%); /* FF3.6-15 */ background: -webkit-linear-gradient(top, #0c24ff 0%,#000556 91%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, #0c24ff 0%,#000556 91%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ border-radius: 5px; } .sheet-section { margin: 5px; display: block; } .sheet-table { display: table; width: 100%; } .sheet-table-header { display: table-cell; text-align: center; font-weight: bold; vertical-align: middle; font-size: 80%; } .sheet-table-header-left { display: table-cell; text-align: center; font-weight: bold; vertical-align: middle; font-size: 140%; line-height: 100%; background-color: #000556; padding: 2px; color: white; border-radius: 5px; } .sheet-table-row { display: table-row; vertical-align: middle; width: 100%; } .sheet-table-data { display: table-cell; vertical-align: middle; text-align: center; } Thanks for your time!

(Moved to Character Sheets and Compendium Forum)

Looks like the only class that has a margin set is sheet-section, but none of your elements in the HTML have that class. Without that class being set, the margin won't apply... For example: <span class='sheet-section'>AC</span> The problem with that, though, is it's a block class, which means everything to the right of the span will likely drop to the next line.  (I could be wrong, but I don't think I am.) An alternative would be: <span style='margin: 5px;'>AC</span> Be aware, that setting the margin like that will apply a 5px margin to all sides of the span. If you only wanted to separate the right side of that span from the element next to it, you could also do something like: <span style='margin-right: 5px;'>AC</span>

I am a CSS fumbler, but it seems to me you would apply the margin to the div, not the span, as it is affecting the whole row, right? Something like this: <div style="margin-bottom: 2px;"> <span>AC</span>

For some reason when I posted the HTML here it stripped all of the class references to the divs and spans -- sorry if that caused any confusion! Anyways, I (finally) figured out the problem. I set up my divs using display: table and the like (as seen in the CSS above), and apparently table elements do not get along with margins. Use border-spacing instead. Thank you for your time, guys!