CSS <a> 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.

这是我的代码（也在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>

Answer 1

这是因为您在图片下方有空格。由于gs:元素设置为a而图像为inline-block元素，因此a的高度将是图像的高度+此空白区域。

尝试添加inline以删除空格（或任何其他替代方案），两者都具有相同的大小：

＆＃13;

＆＃13;

font-size:0

＆＃13;

* {
  margin: 0;
  padding: 0;
}

html {
  background-color: #000000;
}

body {
  background-color: #660000;
  font-size: 100%;
  color: white;
}

header {
  min-height: 102px;
  text-align: center;
  font-family: "Felix Titling Regular", Times, serif;
}

header>a {
  display: inline-block;
  position: absolute;
  left: 0;
  font-size:0;
}

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

＆＃13;

＆＃13;

＆＃13;

一些有用的链接，可以了解有关此行为的更多信息：

Remove white space below image

Image inside div has extra space below the image

Mystery white space underneath image tag

Answer 2

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