Placing images directly on top of each other

Question

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>

you could use vertical-align =middle or margin bottom for the first image as -5px — wingskush, Mar 09 '14 at 09:27
@MohammedR.El-Khoudary `` is an **replaced** inline element and top/bottom `margin` properties are applicable to images. [Verify that](http://jsbin.com/nobub/1/edit). — Hashem Qolami, Mar 09 '14 at 11:46

score 2 · Accepted Answer · answered Mar 09 '14 at 09:20

2

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

img {
margin: 0;
display: block;
}

answered Mar 09 '14 at 09:20

Mohammed R. El-Khoudary

1,203
7
18

1

It doesn't address the reason of the **green line** in between the images. – Mimi Mar 09 '14 at 11:47
There're browser defaults .. have you tried setting margin: 0; padding: 0; in the * { } selector? – Mohammed R. El-Khoudary Mar 09 '14 at 16:00
I'd help you better if you can provide me with a JSFiddle – Mohammed R. El-Khoudary Mar 09 '14 at 16:00

score 1 · Answer 2 · edited May 23 '17 at 12:13

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;.

Placing images directly on top of each other

2 Answers2