Placing images directly on top of each other

I have this HTML code, and I just want to place the images directly on top of each other. (so without this green line in between them) How to do this?

Example URL: http://todolist.x10.mx/test.html

HTML Code:

<!DOCTYPE html>

<html>
<head>

<title>test</title>
<meta http-equiv="Content-Type" content="text/html">
</head>
<body bgcolor="green">
<img src="f.jpg" width="200" height="80" alt="plaatje1" style="border:none;padding:0px;spacing:0px;margin:0px"><br>
<img src="f.jpg" width="200" height="80" alt="plaatje2" style="border:none;padding:0px;spacing:0px;margin:0px"><br>
</body>
</html>

Answers


The gap belongs to the line height reserved character as the inline elements (the images in this case) are aligned vertically in their baseline by default.

You could align the inline elements vertically by vertical-align: middle; (or top/bottom) to remove the vertical gap between the lines.

You can refer my answer here for further info.

Also, you could simply remove the <br> between two lines and change the default display type of the images to block, as: display: block;.


Don't use <br /> instead add the following CSS:

img {
margin: 0;
display: block;
}

Need Your Help

jQuery plugins - accessing element from the options

javascript jquery plugins

Most jQuery plugins have options like this one for example (cycle):

PIE.htc not working with YUI3 in IE8

css3 internet-explorer-8 yui3

I'm using PIE for shadows, radius borders and gradients but none of these are working in IE8.