Question 233675 in CSS Question posted in
Some basic documentation can be found here.

Css – Big gap between elements when margin is set to 0 auto

I’ve used margin: 0 auto; on my two GIF images and also the following properties: bottom, left, right.

It worked very well because my intention was to set them between another image.

However, under these images there is one p element and here is the problem – after setting the position of the two gifs, the site extends because a gap shows up. Part of my code:

#lfinger, #rfinger {
  display: block;
  position: relative;  
  margin: 0 auto;
  width: 150px;
  height: 130px;
}

#rfinger {
  bottom: 250px;
  right: 270px;
}

#lfinger {
  bottom: 145px;
  left: 262px;
}

p {
  background-color: rgba(255,0,255,0.5);
  text-shadow: 1px 1px 10px dimgrey;
  text-align: center;
  word-spacing: 2px;
  font-family: Brush Script MT, Cursive;
  font-size: 20px;
  color: Ivory;
  padding: 10px 0;
  position: relative;
}

html:

<img id="lfinger" src="images/left.gif" alt="left">
<img id="rfinger" src="images/right.gif" alt="right">

I’d tried to change the height property to max, min, and auto but no results so far.
I guess an additional property should be added to the ID selector rfinger and lfinger.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I did the way you said, using the first method but slightly modify the code.

    1. Added negative margin-bottom to the double #lfinger, #rfinger ID Selector.

    2. Also added margin: to the p element. I used the shorthand property, setting the top-margin and the rest of values to 0 0 0.

    Thanks.


  2. 0

    position relative allows to move an element without moving other elements, but you still have space reserved for your element.
    In your case, either add a negative margin-bottom equal to the bottom(bottom: 250px; margin-bottom: 250px;)
    or
    wrap your #lfinger, #rfinger and other images with relative container,
    and #lfinger, #rfinger make position: absolute

    .wrap {
position: relative;
background: rgba(0,255,255,0.5);
}

.сfinger {
display: block;
height: 200px;
margin: 0 auto;
}

#lfinger, #rfinger {
  position: absolute;  
  height: 130px;
}

#rfinger {
  bottom: 50px;
  right: 10px;
}

#lfinger {
  bottom: 25px;
  left: 20px;
}

p {
margin: 0;
  background-color: rgba(255,0,255,0.5);
  text-shadow: 1px 1px 10px dimgrey;
  text-align: center;
  word-spacing: 2px;
  font-family: Brush Script MT, Cursive;
  font-size: 20px;
  color: Ivory;
  padding: 10px 0;
  position: relative;
}
    <div class="wrap">
<!-- Center -->
  <img src="https://i0.wp.com/www.galvanizeaction.org/wp-content/uploads/2022/06/Wow-gif.gif?fit=450%2C250&ssl=1" class="сfinger" />

<!-- Left -->
  <img id="lfinger" src="https://i0.wp.com/www.printmag.com/wp-content/uploads/2021/02/4cbe8d_f1ed2800a49649848102c68fc5a66e53mv2.gif?resize=476%2C280&ssl=1" />

<!-- Right -->
  <img id="rfinger" src="https://thumbs.gfycat.com/AnimatedMedicalHorseshoebat-size_restricted.gif" />
</div>
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
</p>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search