remove spacing at the sides and middle of images

Question

I need these images to fill the entire screen. Currently there is a white space around the entire page as well as between the images.

<!DOCTYPE html>
<html>
<head>

<title>TITLE</title>
</head>

<style>
html, body {
    max-width: 100%;
}
</style>

<body>
<style>
.staticsite
left: 0%;
font-size: 0;
line-height: 0;
}

div {
    width: 100%;
}
</style>

<div style="staticsite">
<a href="URL" style="text-decoration: none">
    <img class="staticsite" img draggable="false" src="IMGURL" width="100%" alt=""> </a>
<img class="staticsite" img draggable="false" src="IMGURL" width="100%" alt="">
</div>

</body>
</html>

I've tried putting them in a DIV that fills the screen, I'm not too sure why this isn't working. I've just put all of the code above as this is the entire page.

Do you mean you want the vertically-stacked images to fill the screen's width? Or you want each image to take up the entire viewport, both width and height? — showdev, Dec 22 '17 at 01:48
The vertically stacked images, so that they appear as one but only the top section is linked elsewhere @showdev — codingpassion, Dec 22 '17 at 01:54

showdev · Accepted Answer · 2017-12-22T01:56:55.993

2

To eliminate space around the entire page, set the body's margin to zero.
See HTML default body margin.
To make images fill the screen's width, set them to width:100%.
To eliminate the space between images, set them to display:block.
See Use CSS to remove the space between images.

body {
  margin: 0;
}

img {
  display: block;
  width: 100%;
}

<a href="#">
  <img src="//via.placeholder.com/300x50" alt="">
</a>
<img src="//via.placeholder.com/300x50" alt="">

edited Dec 22 '17 at 01:56

answered Dec 22 '17 at 01:52

showdev

28,454
37
55
73

Perfect, Thank You! I don't know why I missed that :) @showdev – codingpassion Dec 22 '17 at 01:56

score 1 · Answer 2 · answered Dec 22 '17 at 01:54

I added some extra styling to fix your issues. The margin on the body will prevent the white border, while the block display will take care of the white space between the images.

<html>
<head>
<style>
body {
    margin: 0;
}

img {
    max-width: 100%;
    margin:0;
    padding:0;
    width:100%;
    height:auto;
    display:block;
}
</style>

<body>
<div>
 <img src="https://img-9gag-fun.9cache.com/photo/azq0grm_460s.jpg" />
 <img src="https://img-9gag-fun.9cache.com/photo/azq0grm_460s.jpg" />
</div>
</body>
</html>

Edit: Basically the same answer as the other person but a bit later.

remove spacing at the sides and middle of images

2 Answers2