CSS tag is longer than the image inside it?

Question

I was inspecting the elements on firefox and chrome I realised that the a element is longer than the image inside it. The image is 102px and the a is 106.4px. I'm wondering where do the extra 4.4 pixels come from?

The original image is 102px by 102px.

here's my code (also on jsfiddle https://jsfiddle.net/g5nsL52a/ ):

header {
 min-height:102px;
 text-align:center;
 font-family: "Felix Titling Regular", Times, serif;
}
header a {
 display:inline-block;
 position:absolute;
 left:0;
}

header h1 {
 display:inline-block;
 position:relative;
 top:29px;
 font-size:300%;
 text-transform:capitalize;
}

<header>
  <a href="index.html">
    <img src="https://images.pexels.com/photos/430205/pexels-photo-430205.jpeg" width="102" height="102" alt="Godfather Logo" title="Godfather Small Logo"/>
  </a>
  <h1> loyal capos to the don </h1>
</header>

Read here: https://stackoverflow.com/questions/5804256/image-inside-div-has-extra-space-below-the-image — Rauli Rajande, Dec 23 '17 at 11:34

score 0 · Answer 1 · edited Dec 23 '17 at 12:31

0

header a{
    display:inline-block;
    position:absolute;
    left:0;
    height:102px;
    width:102px;
    padding:0;
    margin:0;
}

edited Dec 23 '17 at 12:31

Donald Duck

8,409
22
75
99

answered Dec 23 '17 at 11:51

kadir

64
4

1

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. – Donald Duck Dec 23 '17 at 12:31
1

Could you update your answer and explain what you are doing. Many thanks in advance – MZaragoza Dec 23 '17 at 13:45
other tag css tag properties (css) override so change css and I'm give static width and height tag with css. You're welcome. – kadir Dec 23 '17 at 15:09

CSS tag is longer than the image inside it?

1 Answers1