I am wasting a lot of time doing a simple thing:
I want to show an image and I want to show the same image under the previous one. I've put the two image in a table, but I have a strange space under the image.
This is the simple code:
<!DOCTYPE html>
<html>
<head>
<LINK href="style_new.css" rel="stylesheet" type="text/css">
</head>
<body>
<?php
echo "<table class=\"top\">";
echo "<tbody>";
echo "<tr><td class=\"t_top\"><img src=\"try.png\" vspace=\"0px\"/></td></tr>";
echo "<tr><td class=\"t_top\"><img src=\"try.png\" vspace=\"0px\"/></td></tr>";
echo "</tbody>";
echo "</table>";
?>
</body>
</html>
and relative style sheet:
table.top
{
border-spacing:0px;
border:0px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
border-spacing: 0px;
}
img.top
{
border-spacing:0px;
border:0px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
td.t_top
{
border-spacing:0px;
border:0px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
tr.t_top
{
border-spacing:0px;
border:0px;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
My image have an height 58px. I've tried to check on various browser and spaces are still there. I'have some pixel of space down the image and up the <td> border (that I've put to check), then I have <td> and <tr> object that are 62px but the img object is 58px
Can I remove this spaces?
There are three ways to do this as discussed in an already answered question.
Set the img to
display:block;
or set
lineheight to 0px;
or set
vertical alignment to top.
I don't know best way to link to existing question. I havent paid much attention. Explaination can be given if asked.
I found it: Where is this blank space coming from?