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

Question

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 :

Padding: http://jsfiddle.net/0f4jzdmk/1/

Margin: http://jsfiddle.net/0f4jzdmk/2/

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

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/

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

Sign up