tag gets height - why is that?

Question

Why is that <a> tag gets height in below example jsfiddle

I guess that's why my margins on feature class don't work as expected.

Sample of code

.feature {
  margin: 0;
  position: relative;
  margin: 10px 0;
}

.feature__caption {
  position: absolute;
  bottom: 5px;
  color: #c158ad;
  text-align: center;
  width: 100%;
  font-size: 1.5em;
  padding: 2% 0;
  right: 0;
  left: 0;
}

<div class="col span_4_of_12">
  <figure class="feature">
    <a href="#">
      <img src="http://via.placeholder.com/350x150" alt="shoes">
      <figcaption class="feature__caption">ACCESSORIES</figcaption>
    </a>
  </figure>
  <figure class="feature">
    <a href="#">
      <img src="http://via.placeholder.com/350x150" alt="shoes">
      <figcaption class="feature__caption">LATEST FASHION</figcaption>
    </a>
  </figure>
</div>

That renders exactly the way I would expect from the code. I have no idea what you are expecting, so explaining why it doesn't look that way is hard. — Quentin, Jul 22 '17 at 12:01
Because you put an with a certain width and height (from the image name I am guessing it is 350x150) inside of the ? — takendarkk, Jul 22 '17 at 12:01
@Quentin dunno why tag has exactly 18px height. What is more important why margins don't work on
. I mean they collapse each other. — Przemek85, Jul 22 '17 at 12:03
@Przemek85 — Is your question "Why is the distance between the images 10px instead of 20px?"? If so, [it is a duplicate](https://stackoverflow.com/questions/19718634/how-to-disable-margin-collapsing). — Quentin, Jul 22 '17 at 12:10

Marco Magrini · Answer 1 · 2017-07-23T18:42:06.357

1

Not sure if this is what you want. Try it out.

.feature img {
  display: block;  
}

Browsers technically use display: inline (as you can see in the developer tools), for img tags. Anyway images get somehow a special treatment and their default display is very much like the one of an inline-block element.

edited Jul 23 '17 at 18:42

answered Jul 22 '17 at 12:07

Marco Magrini

749
1
9
19

1

hell yeah ! Can you explain ? – Przemek85 Jul 22 '17 at 12:09
@Przemek85 browsers technically use display: inline (as you can see in the developer tools), for img tags. Anyway images get somehow a special treatment and their default display is very much like the one of an inline-block element. – Marco Magrini Jul 22 '17 at 12:16
3

@MarcoMagrini, please put your explanation in your answer. – isherwood Jul 22 '17 at 12:51

tag gets height - why is that?

1 Answers1