CODEWITHSUNDEEP
htmlcsswhitespacecss-tables
user1831430
user1831430

Reputation: 83

How do you get rid of the automatic space added on a div within a td?

I have a simple table similar to this.

<table style='border-collapse: collapse;'>
    <tr>
        <td style='border: 1px solid blue;'>
        <div style='background-color: yellow;'>
            test
        </div>
        <div style='background-color: green;'>
            test
        </div>
        </td>
        <td style='background-color: red; border: 1px solid blue;'>
            test
        </td>
    </tr>
</table>

This table generates this:

enter image description here

Is there any way to get rid of the space that is added between the yellow and green divs and the table border?

Upvotes: 0

Views: 97

Answers (3)

njtman
njtman

Reputation: 2170

Add this to your CSS

td {
    padding:0;   
}

Upvotes: 1

Mr. Alien
Mr. Alien

Reputation: 157324

It is because you are not normalizing your CSS, browser applies some default margin and padding to some elements, inorder to reset those, here's a quick fix..

* {
    margin: 0;
    padding: 0;
}

Demo

If you want to normalize your CSS in a more lenient way, than you can use CSS Reset

Upvotes: 2

BoltClock
BoltClock

Reputation: 723578

That space is cell padding inserted by many (if not all) browsers by default, which you can easily remove:

<td style='border: 1px solid blue; padding: 0;'>

Upvotes: 2

Related Questions