<img> in <table> without any spaces
I am trying to put two images side by side inside a <td> (also tried one <td> for each img), but has some white spaces between the images, and do not understand where they come .. I can solve my problem using float, but I'm trying to avoid this. If someone can explain to me why this happens. I took some tips from other questions, but it doesn't work.
Here is my code:
<html>
<head>
<style "text/css">
td, tr, img { padding: 0px; margin: 0px; border: none; }
table { border-collapse: collapse;}
</style>
</head>
<body style="background: black;">
<center>
<table cellspacing="0" cellpadding="0">
<tr>
<td>
<img alt="" title="" src="http://i.min.us/ijCTdY.jpg" />
开发者_如何学JAVA </td>
</tr>
<tr>
<td>
<img alt="" title="" src="http://i.min.us/jj7Yt6.jpg"/>
<img alt="" title="" src="http://i.min.us/ijCo96.jpg"/>
</td>
</tr>
</table>
</center>
</body>
you can notice that the top image has 800 px height, and the other ones has 400px each one, what I need is some kinda square, without any spaces between the images.
imgs are inline elements. The horizontal space between the images is coming from the whitespace between the images in the HTML. The same reason that there's a space between the characters here.
So, to fix that, remove the whitespace: http://jsfiddle.net/xMW7N/2/
The vertical space is also because the images are inline elements. The gap is the space reserved for descenders in letters like g and j.
To fix that, set vertical-align: top on img: http://jsfiddle.net/xMW7N/3/
Although in your case (as mentioned in your question), setting float: left works just fine: http://jsfiddle.net/xMW7N/4/
That works because float: left forces display: block, so all of the problems caused by the images being inline are resolved.
It's the whitespace in your markup itself. If you remove the line-break and the spaces between the two images, the space will go away.
The whitespace is treated as text, as a single space character.
This is easier done without tables: http://jsfiddle.net/feSxA/
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {
background: black;
}
.imgHolder {
width: 800px;
margin: auto;
}
.imgHolder img {
float: left;
}
</style>
</head>
<body>
<div class="imgHolder">
<img alt="" title="" src="http://i.min.us/ijCTdY.jpg" />
<img alt="" title="" src="http://i.min.us/jj7Yt6.jpg" />
<img alt="" title="" src="http://i.min.us/ijCo96.jpg" />
</div>
</body>
</html>
try adding a border="0" in your table element
Add display: block; to your images.
This will remove any gaps caused by the image being inline but you may need to split the cells up to allow them to sit side by side.
You can also remove the whitespace which should get rid of the whitespace.
加载中,请稍侯......
精彩评论