Как сделать тег <a>href кликабельным только для реального контента?

Question

Я пытаюсь сделать заголовок с фиксированным заголовком, горизонтально и вертикально по центру. Со значком дома, который действует как ссылка.

Проблема заключается в том, что ссылка щелкается на всем, что осталось от значка «Домой».

Я пытался повторить проблему в этом коде;

body {
  margin: 0;
  background-color: #2d2d2d;
}

#header {
  margin: 0;
  background-color: rgb(171, 228, 250);
  height: 10vh;
  display: flex;
}

#homeIcon {
  position: absolute;
  padding-top: 2px;
  padding-left: 30vw;
  height: 10vh;
}

#headerTitle {
  margin: auto;
  font-size: 5vh;
  color: #2d2d2d;
}

<div id="header">
  <a href="">
    <img id="homeIcon" src="https://image.flaticon.com/icons/svg/846/846551.svg" alt="homeicon" />
  </a>
  <h1 id="headerTitle"> title </h1>

</div>

Есть ли способ иметь ссылку только на содержимое тега img?

Answer 1

В вашем CSS вы указываете, что homeIcon имеет padding-left из 30vw. Если вы измените это значение на margin-left, оно больше не будет активным. Это потому, что padding включен внутри вашего элемента, а margin - снаружи. См https://www.w3schools.com/css/css_boxmodel.asp.

Answer 2

css - это ваша проблема: вы можете решить ее, изменив padding-left: 30vw; на margin-left: 30vw;

. Этот ответ может быть полезен для справочного чтения: Разница между полем и отступом?

Answer 3

Используйте left вместо padding-left

body {
  margin: 0;
  background-color: #2d2d2d;
}

#header {
  margin: 0;
  background-color: rgb(171, 228, 250);
  height: 10vh;
  display: flex;
}

#homeIcon {
  position: absolute;
  padding-top: 2px;
  left: 30vw;
  height: 10vh;
}

#headerTitle {
  margin: auto;
  font-size: 5vh;
  color: #2d2d2d;
}

<div id="header">
  <a href="">
    <img id="homeIcon" src="https://image.flaticon.com/icons/svg/846/846551.svg" alt="homeicon" />
  </a>
  <h1 id="headerTitle"> title </h1>

</div>