How to remove the spacing generated by the tag a?

Asked

Viewed 97 times

0

When I enter the tag a to link the img, generates a space at the bottom of the images. See the image below!

Although the space is small, it is very annoying not knowing how to solve:

inserir a descrição da imagem aqui

I need the link to not generate this spacing.

HTML

<section class="compartilhar">

<figure>
    <a href="https://www.facebook.com/sharer/sharer.php?u=http://www.guaraparivirtual.com.br" title="Compartilhar no Facebook">
    <img src="./imagens/compartilhar-face.png">
    </a>
</figure>

<figure>
    <a href="https://twitter.com/intent/tweet?url=http://www.guaraparivirtual.com.br&text=Guarapari%20Virtual" title="Compartilhar no Twitter">
    <img src="./imagens/compartilhar-gplus.png">
    </a>
</figure>

<figure>
    <a href="https://plus.google.com/share?url=http://www.guaraparivirtual.com.br" title="Compartilhar no Goole Plus">
    <img src="./imagens/compartilhar-twitter.png">
    </a>
</figure>

<figure>
    <a href="http://www.linkedin.com/shareArticle?mini=true&url=http://www.guaraparivirtual.com.br&title=Guarapari%20Virtual" title="Compartilhar no LinkEdin">
    <img src="./imagens/compartilhar-linkedin.png">
    </a>
</figure>

<figure>
    <a href="https://www.facebook.com/sharer/sharer.php?u=http://www.guaraparivirtual.com.br" title="Compartilhar no Tumblr">
    <img src="./imagens/compartilhar-tumblr.png">
    </a>
</figure>

<figure>
    <a href="https://www.facebook.com/sharer/sharer.php?u=http://www.guaraparivirtual.com.br" title="Compartilhar no Pinterest">
    <img src="./imagens/compartilhar-pinterest.png">
    </a>
</figure>

</section>

CSS

section.compartilhar{
  width: 100%;
  max-width: 1200px;
  margin: auto;
  padding: 2px;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  background-color: #D6E6F0;
}

section.compartilhar figure{
  width: 16.66666666666667%;
}

section.compartilhar figure img{
  max-height: 40px;
  margin-left: 50%;
  padding: 5px;
  box-sizing: border-box;
}
css

  • Have you ever tried to put everything on the same line? That’s usually it!

  • @dipievil I did as you told me, but it didn’t work!

  • By inspecting the browser you have already been able to identify where the space is (in a, href, etc)?

  • @dipievil realized that it is in the a

  • Then create a class and add to the "a" with padding:0px ;)

  • If nothing they suggested works, try putting this in your CSS: a { line-height: 0; }

  • Did you ever stop to think that it might be a spacing in the image itself? A simple tip that opens doors to develop: When the subject is icon, try not to use images as you are doing there. Why? Images can burst resolution depending on the screen size and are not prepared for every kind of resolution. Is there a solution? Of course! Take a look at this site and be surprised with the amount of icons (in font format) available for free and that will never lose 1px if you want resolution (http://fontawesome.io/icons/)

Show 2 more comments

2 answers

0

Both the tag a how much img are, by default, "in-line" elements, i.e., receive display: inline, therefore, they receive a line height as if it were a common text.

One solution can be to put in both line-height: 0, but the best overall solution is to use display: block or display: inline-block.

0

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.