Where is this rogue white-space coming from?

Question

This is a screenshot from Opera using FireFly. It clearly illustrates the padding (5px) and margin (0px) of the textbox. However, to the right of the textbox is an unidentified black space of approximately 10px that isn't HTML whitespace, td padding, textbox margin or anything else I can think of.

The spacing also exists in FireFox and IE 9.

(Please ignore the fact that the below button has the same indent - in its case I've added padding-right to the td as a hack to even it out)

Any ideas?

Actually this would be a *killer* thing to add to one of the many, many web development tools. Point-and-click "Where is this #*$$*&^ whitespace coming from?" Most will outline a block for you, but telling you where those specific pixels came from? That'd be sweet. — Clinton Pierce, Oct 14 '11 at 14:29

score 1 · Answer 1 · answered Jun 10 '11 at 14:50

1

You should really be posting the code itself rather than an image of what's going on. Make sure if you're using <td> that the </td> immediately follows the final piece of content:

<td>
    <input type="text"></td>  <!-- No space here, not even a CRLF -->

answered Jun 10 '11 at 14:50

Joel Etherton

37,325
10
89
104

score 0 · Accepted Answer · answered Jun 10 '11 at 15:23

Even the best of us can blank completely... The reason for my problem is obviously that the width of the textbox isn't set to a width that will fill the td. Increasing the width fixed that problem.

Setting it to 100% for some reason pushes it beyond the bounds of the td though, but that's a different problem.

@Tim Post: This is the answer to my problem, not a comment - Please don't just delete answers without a second thought.

Where is this rogue white-space coming from?

2 Answers2