CODEWITHSUNDEEP
htmlcss
J S
J S

Reputation: 3496

Unintentional Padding in Text Elements

I'm using tables per a client's request for a design. (Read: No other option)

All the table cells seem to be applying some sort of vertical padding and screwing up all my spacing. I've changed the text/background color of one of the cells on the fiddle to show you what I mean. I have tried setting margin and padding to 0 on all applicable elements.

Thanks for any help!

    <table width="346" border="0" cellpadding="0" cellspacing="0">
        <tr height="66">
        <td width="85" style="padding:0;" align="left" valign="top">
            <span style="font-size:66px;font-weight:bold;line-height:50ox;">50</span>
        </td>
        <td width="50" align="left" valign="middle">
            <table border="0" cellpadding="0" cellspacing="0">
                <tr height="30">
                    <td width="50" align="center" valign="bottom">
                        <span style="font-size:28px;font-weight:bold;">%</span>
                    </td>
                </tr>
                <tr height="20">
                    <td width="50" align="center" valign="bottom">
                        <span style="font-size:28px;font-weight:bold;">OFF</span>
                    </td>
                </tr>
            </table>
        </td>
        <td width="211"></td>
    </tr>
</table>

JSFiddle: http://jsfiddle.net/EMtxu/

(note that I'm only looking at the vertical padding, not the right side which is just a result of the cell size)

Upvotes: 0

Views: 135

Answers (2)

Steve Ray
Steve Ray

Reputation: 158

I think what you're seeing is a combination of two things:

  1. line-height. Your big "50" has a line-height associated with it that allows for ascenders/descenders (like the part of a lowercase "p" that descends below the baseline). In this case, that means extra space below the "50".
  2. All TDs in a row are the same height, so the second TD adjusts to be as deep as the first TD, resulting in extra space there, too.

Solution: set a hard line-height on the "50" that is less than or equal to the font-size.

Upvotes: 0

Matthew R.
Matthew R.

Reputation: 4350

I am assuming the reason you are using inline styles is because you are doing an email. Try removing the tr heights on those child elements and set the line height for both spans. Here is the updated fiddle: http://jsfiddle.net/EMtxu/2/

Upvotes: 1

Related Questions