Al-Mothafar Al-Mothafar - 1 year ago 112
CSS Question

Cell of table (td) ignores span's and label's top/bottom margin/padding

I have an issue that any

span
and
label
have
margin
or
padding
as a child of
td
of the
table
.

This issue is the top and bottom margin got ignored inside the
td
, I mean the left and right padding works and the element get the top and bottom too but
td
hide the
margin-top
,
padding-top
,
margin-bottom
and
padding-bottom
inside it do not resize the cell height automatically, it is respecting top and bottom margins or paddings, it is acting like you have
overflow: hidden
for that
td
with fixed
height
.

The following JSFiddle links show the full code and case :


Answer Source

I found a simple solution, it is to add change the display of the inline elements to inline-block, seems the td height not read the top/bottom margin/padding of inline children.

change the style like this :

span {
   display: inline-block;
}

jsfiddle: http://jsfiddle.net/0f4jzdmk/3/

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download