CODEWITHSUNDEEP
htmlcssimage
user1557314
user1557314

Reputation: 169

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>

Upvotes: 2

Views: 1928

Answers (2)

Mohammed R. El-Khoudary
Mohammed R. El-Khoudary

Reputation: 1203

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

img {
margin: 0;
display: block;
}

Upvotes: 2

Hashem Qolami
Hashem Qolami

Reputation: 99484

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

Upvotes: 1

Related Questions