ChrisMcJava ChrisMcJava - 1 month ago 6
CSS Question

Undesired vertical padding in an html table

I have a one row, three column table in html that has this unwanted vertical padding. I have three images, each one aligned to the left, one the center, and one to the right. I have tried setting the margins and padding to 0, but neither work. I highlighted the image and table with my browser cursor to show which padding is undesired. Does anyone know how to fix this?

enter image description here

...
<style>
table {
border-collapse:collapse;
table-layout:fixed;
width:100%;
cellpadding: 0;
}
tr {
padding:0;
margin:0;
word-wrap:break-word;
}
td {
padding:0;
margin:0;
word-wrap:break-word;
}
</style>
</head>
<body>

<table border="1">
<tr>
<td>
<img src="smiley.gif" alt="Smiley face" width="42" height="42" align="left">
</td>
<td>
<p style="text-align:center">
<img src="smiley.gif" alt="Smiley face" width="42" height="42" align="middle" >
</p>
</td>
<td>
<img src="smiley.gif" alt="Smiley face" width="42" height="42" align="right">
</td>
</tr>
</table>
...


EDIT:

enter image description here

Answer

I got it:

It was the default paragraph element margin. I just added "margin:0;" to the style.

<table border="1">
  <tr>
    <td>
      <img src="smiley.gif" alt="Smiley face" width="42" height="42" align="left">
    </td>
    <td>
      <p style="text-align:center; margin:0;">
        <img src="smiley.gif" alt="Smiley face" width="42" height="42" align="middle" >
      </p>
    </td>
    <td>
      <img src="smiley.gif" alt="Smiley face" width="42" height="42" align="right">
  </tr>
</table>
Comments