Search code examples
htmlborder

HTML Remove the space between div and table

I want to remove the space there and make my images looks nice, but I don't know how.

There is always space between the div and table. I tried collapse but it did not work

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
    .div1{
        width: 600px;
        height: 150px;
        border: 1px solid black;
        margin: auto;
        background-image:url("images/piha1.jpg");
    }
    table tr td{
 
    }
    img{
        width: 200px;
        height: 150px;
    }

</style>
</head>

<body>
<div class="div1">
    <table>
        <tr>
            <td><img id="surfimg" src="images/piha2.jpg" alt="surf"></td>
            <td><img id="picnic" src="images/piha3.jpg" alt="picnic"></td>
        </tr>
    </table>

</div>
</body>
</html>
Solution

  • Try using collapse on the table and reducing the padding from the td to zero:

    table {
    border-collapse: collapse;
}

td {
    padding: 0;
}