CODEWITHSUNDEEP
htmlcss
Mana
Mana

Reputation: 382

How to remove spacing between <picture> tags?

I have managed to display 3 images one after the other in mobile preview through the following HTML code:

<main>

  <div class="showcase">
    <picture>
      <source media="(min-width:1100px)" srcset="images/p1.jpg">
        <source media="(min-width:900px)" srcset="images/p1tab.jpg">

          <img src="images/p1mob.jpg" width=100% alt="Image 1" />
    </picture>

    <p> <a href="">OUR MENU</a> 
    </p>
  </div>

  <div class="showcase">
    <picture>
      <source media="(min-width:1100px)" srcset="images/p2.jpg">
        <source media="(min-width:900px)" srcset="images/p2tab.jpg">

          <img src="images/p2mob.jpg" width=100% alt="Image 2" />
    </picture>
    <p><a href="">RESERVATIONS</a>
    </p>
  </div>
  <div class="showcase">
    <picture>
      <source media="(min-width:1100px)" srcset="images/p3.jpg">
        <source media="(min-width:900px)" srcset="images/p3tab.jpg">

          <img src="images/p3mob.jpg" width=100% alt="Image 3" />
    </picture>
    <p> <a href="">LOCATE US </a>
    </p>
  </div>

  <div class="horizontal">
    <a href=""> ORDER ONLINE </a>
  </div>
</main>

I have used the following CSS for formatting:

main {
  margin: 0px;
}
.showcase {
  position: relative;
  margin: 0px;
  padding: 0px;
}
.showcase picture {
  position: relative;
  margin: 0px;
  padding: 0px;
}
.showcase p a {
  margin: 0px;
  position: absolute;
  top: 45%;
  left: 44%;
  text-align: right;
  text-decoration: none;
  font-family: Fjalla One;
  color: white;
  /* TRBL */
}

I tried to take away margins everywhere but still, somehow the margins underneath the picture would NEVER go away.

Here is how to is being displayed:

enter image description here

I don't want the gap to be visible. Where am I missing out on the code? The spacing always appears UNDER the photo, not above the three images.

Upvotes: 0

Views: 80

Answers (2)

SpikeEdge
SpikeEdge

Reputation: 939

You need to define display:block attribute to all the images.

Create a new css class:

.showcase picture img{
     display:block
}

Ref: Space between div and img?

Upvotes: 0

peterjb
peterjb

Reputation: 819

You have position:absolute on the <a> tag, so the <p> tag is still sitting down below the image. Even though it has no height, it probably still has margins, which are causing the gaps. I think you can apply the positioning css to the p tags or set their margins to 0 to fix. (minor edit because i realized you had style rules for how the anchor is displayed)

Edit: Also note that there will still be some space between them because images are inline by default and placed on the baseline. You can fix that by either setting the <img>s to display:block or vertical-align:bottom.

Upvotes: 2

Related Questions