CODEWITHSUNDEEP
htmlcssimage
codingpassion
codingpassion

Reputation: 5

remove spacing at the sides and middle of images

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.

Upvotes: 0

Views: 682

Answers (2)

showdev
showdev

Reputation: 29168

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="">

Upvotes: 2

Glenn D.J.
Glenn D.J.

Reputation: 1965

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.

Upvotes: 1

Related Questions