How to remove automatically generated HTML container margin around image

Question

I'm trying to remove the automatically generated container margin around this image. Below is the code I used to produce it. You can view the website here. I tried to add a margin and padding item to the body element, but it didn't resolve the issue.

.container {
  position: relative;
  width: 240px;
  height: 240px;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.container:hover .overlay {
  opacity: 0.85;
}

.text {
  color: white;
  font-size: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}

<div class="container">
  <img src="./img/headshots/Exec_DMoon.jpg" width="240" height="240" alt="Photo of David Moon, Assistant Vice President for Financial Affairs" class="image">
  <div class="overlay">
    <div class="text"><b>David Moon</b> Assistant Vice President for Financial Affairs, <a class="usa-external_link" target="_blank" href="mailto:davidmoon826@gwmail.gwu.edu">Email</a></div>
  </div>
</div>

This is the desired output:

What am I doing wrong?

Am I missing something? The site you linked to looks like the "desired output". Also the code on your site doesn't match the screenshot of your code — j08691, Jun 29 '17 at 18:00
Give [flexboxes](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes) a go, will save you some headaches. — Amous, Jun 29 '17 at 18:01
@j08691 Sorry, I just synced my code to the Github page, now it shows as I described. — , Jun 29 '17 at 18:05
It would be easier to answer this question if your snippet actually represented the code you'd like to use. For instance, having more than one image, and using images that are able to be referenced. You can use a service like lorempixel.com to get images that are the same size as yours, if you don't want to point to the full URL of your own images in the snippet. — Heretic Monkey, Jun 29 '17 at 18:17
@MikeMcCaughan The code for this page can be viewed here: https://github.com/jamesharnett/SA-website/blob/master/vice-presidents.html — , Jun 29 '17 at 18:21
@MikeMcCaughan The link to the GitHub page is https://jamesharnett.github.io/SA-website/vice-presidents.html — , Jun 29 '17 at 18:22
And, as we've seen, that code changes. When you change that code again, what good will this question do for anyone else? Please read [ask] and [mcve]. — Heretic Monkey, Jun 29 '17 at 18:22

score 0 · Answer 1 · answered Jun 29 '17 at 19:59

0

The easiest fix for this, imo: wrap the items you want in a grid in a div and give the div display: flex and flex-wrap: wrap. Good luck!

answered Jun 29 '17 at 19:59

k88lawrence

897
9
13

Johannes · Answer 2 · 2017-06-29T20:25:30.703

0

Well, just add float: left to .container

(to achieve what you show under "this is the desired output")

edited Jun 29 '17 at 20:25

answered Jun 29 '17 at 20:19

Johannes

64,305
18
73
130

Float will cause other issues, though, which will need to be mitigated. `display: inline-block` is generally easier to work with and doesn't require clear fixing. – Adrian Jun 29 '17 at 20:26
In this particular case (when you add it at the original page) float works perfectly. – Johannes Jun 29 '17 at 20:28

score 0 · Accepted Answer · answered Jul 02 '17 at 03:43

The answer from Johannes almost worked, but it caused issues where text would reposition itself into the open gaps (see image below), instead of formatting below all the images.

The solution was to use display: inline-block; in .container, as Adrian recommended.

<!DOCTYPE html>
<html>
<head>
<style>
.container {
  position: relative;
  width: 50%;
  height: 50%;
  display: inline-block;
}

.image {
  display: block;
  width: 100%;
  height: auto;
}

.overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  width: 100%;
  opacity: 0;
  transition: .5s ease;
  background-color: #008CBA;
}

.container:hover .overlay {
  opacity: 0.8;
}

.text {
  color: white;
  font-size: 25px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<h2>Fade in Overlay</h2>
<p>Hover over the image to see the effect.</p>

<div class="container">
  <img src="img_avatar.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

<div class="container">
  <img src="img_avatar.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

<div class="container">
  <img src="img_avatar.png" alt="Avatar" class="image">
  <div class="overlay">
    <div class="text">Hello World</div>
  </div>
</div>

<h2>Fade in Overlay</h2>
<p>Hover over the image to see the effect.</p>

</body>
</html>

How to remove automatically generated HTML container margin around image

3 Answers3