Как убрать пустю область ссылки?

Question

Как убрать пустю область ссылки? Нужно сделать так, чтобы ссылка не работала при наведении/по нажатию на пустую область.

.hero-button {
  display: flex;
  align-items: center;
}

.hero-button-text {
  display: block;
  font-family: var(--Gilroy);
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
  color: #ffffff;
  margin-right: 16px;
}

<a href="#" class="hero-button">
  <span class="hero-button-text">scroll down</span>
  <img class="arrow-down" src="img/icon/arrow-down-icon.svg" alt="arrow-down">
</a>

Answer 1

Свойство display: flex; делает элемент блочным, растягивая его на ширину страницы:

.hero-button {
  display: flex;
  align-items: center;
  box-shadow: 0 0 0 1px red;
}

.hero-button-text {
  display: block;
  font-family: var(--Gilroy);
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
  color: #ffffff;
  margin-right: 16px;
}

<a href="#" class="hero-button">
  <span class="hero-button-text">scroll down</span>
  <img class="arrow-down" src="img/icon/arrow-down-icon.svg" alt="arrow-down">
</a>

Достаточно указать display: inline-flex;, чтобы размеры элемента зависели от контента, облегая его и не создавая пустую область:

.hero-button {
  display: inline-flex;
  align-items: center;
  box-shadow: 0 0 0 1px green;
}

.hero-button-text {
  display: block;
  font-family: var(--Gilroy);
  font-weight: 700;
  font-size: 18px;
  line-height: 22px;
  color: #ffffff;
  margin-right: 16px;
}

<a href="#" class="hero-button">
  <span class="hero-button-text">scroll down</span>
  <img class="arrow-down" src="img/icon/arrow-down-icon.svg" alt="arrow-down">
</a>

БЛОГ НА HUSL

Как убрать пустю область ссылки?

Ответы (1 шт):