БЛОГ НА HUSL


Не удается сделать тег 'a' блочным

Автор вопроса: Лена 

<div style="display: flex; column-gap: 10px;">
    <a href="#">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" style="height: 100%;">
            <path d="M0 7.875A5.623 5.623 0 0 1 5.625 2.25H13.5a2.248 2.248 0 0 1 2.25 2.25 2.248 2.248 0 0 1-2.25 2.25H5.625c-.619 0-1.125.506-1.125 1.125v22.5c0 .619.506 1.125 1.125 1.125h22.5c.619 0 1.125-.506 1.125-1.125V22.5a2.248 2.248 0 0 1 2.25-2.25 2.248 2.248 0 0 1 2.25 2.25v7.875A5.623 5.623 0 0 1 28.125 36h-22.5A5.623 5.623 0 0 1 0 30.375Z" style="opacity:.4"></path>
            <path d="M20.25 2.25A2.248 2.248 0 0 1 22.5 0h11.25A2.248 2.248 0 0 1 36 2.25V13.5a2.248 2.248 0 0 1-2.25 2.25 2.248 2.248 0 0 1-2.25-2.25V7.685L17.34 21.84a2.253 2.253 0 0 1-3.186-3.185L28.314 4.5H22.5a2.248 2.248 0 0 1-2.25-2.25z"></path>
        </svg>
    </a>
    <div>
        <a href="#">TEXTTTE++EEEE</a>
        <br><br>
    </div>
</div>

Иконка принимает высоту родителя и ссылка тоже без строгого выставления размров. Только вот не удается сделать иконку ссылкой, блочным элементом. Иконка постоянно под последующий блок прячется...

Как сделать, чтобы иконка была блочным и высота ее была относительно текста в правом блоке... Без явного указания высоты в px и тп


Источник

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

Автор решения: UModeL

Насколько я понимаю, под "Без явного указания высоты в px и тп" подразумеваются абсолютные единицы. Воспользуйтесь относительными. Например, em.

<div style="display: flex; column-gap: 10px;">
  <a href="#">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" style="height: 1em;">
      <path d="M0 7.875A5.623 5.623 0 0 1 5.625 2.25H13.5a2.248 2.248 0 0 1 2.25 2.25 2.248 2.248 0 0 1-2.25 2.25H5.625c-.619 0-1.125.506-1.125 1.125v22.5c0 .619.506 1.125 1.125 1.125h22.5c.619 0 1.125-.506 1.125-1.125V22.5a2.248 2.248 0 0 1 2.25-2.25 2.248 2.248 0 0 1 2.25 2.25v7.875A5.623 5.623 0 0 1 28.125 36h-22.5A5.623 5.623 0 0 1 0 30.375Z" style="opacity:.4"></path>
      <path d="M20.25 2.25A2.248 2.248 0 0 1 22.5 0h11.25A2.248 2.248 0 0 1 36 2.25V13.5a2.248 2.248 0 0 1-2.25 2.25 2.248 2.248 0 0 1-2.25-2.25V7.685L17.34 21.84a2.253 2.253 0 0 1-3.186-3.185L28.314 4.5H22.5a2.248 2.248 0 0 1-2.25-2.25z"></path>
    </svg>
  </a>
  <div>
    <a href="#">TEXTTTE++EEEE</a>
    <br><br>
  </div>
</div>

<div style="display: flex; column-gap: 10px; font-size: 24px;">
  <a href="#">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" style="height: 1em;">
      <path d="M0 7.875A5.623 5.623 0 0 1 5.625 2.25H13.5a2.248 2.248 0 0 1 2.25 2.25 2.248 2.248 0 0 1-2.25 2.25H5.625c-.619 0-1.125.506-1.125 1.125v22.5c0 .619.506 1.125 1.125 1.125h22.5c.619 0 1.125-.506 1.125-1.125V22.5a2.248 2.248 0 0 1 2.25-2.25 2.248 2.248 0 0 1 2.25 2.25v7.875A5.623 5.623 0 0 1 28.125 36h-22.5A5.623 5.623 0 0 1 0 30.375Z" style="opacity:.4"></path>
      <path d="M20.25 2.25A2.248 2.248 0 0 1 22.5 0h11.25A2.248 2.248 0 0 1 36 2.25V13.5a2.248 2.248 0 0 1-2.25 2.25 2.248 2.248 0 0 1-2.25-2.25V7.685L17.34 21.84a2.253 2.253 0 0 1-3.186-3.185L28.314 4.5H22.5a2.248 2.248 0 0 1-2.25-2.25z"></path>
    </svg>
  </a>
  <div>
    <a href="#">TEXTTTE++EEEE</a>
    <br><br>
  </div>
</div>

<div style="display: flex; column-gap: 10px; font-size: 48px;">
  <a href="#">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" style="height: 1em;">
      <path d="M0 7.875A5.623 5.623 0 0 1 5.625 2.25H13.5a2.248 2.248 0 0 1 2.25 2.25 2.248 2.248 0 0 1-2.25 2.25H5.625c-.619 0-1.125.506-1.125 1.125v22.5c0 .619.506 1.125 1.125 1.125h22.5c.619 0 1.125-.506 1.125-1.125V22.5a2.248 2.248 0 0 1 2.25-2.25 2.248 2.248 0 0 1 2.25 2.25v7.875A5.623 5.623 0 0 1 28.125 36h-22.5A5.623 5.623 0 0 1 0 30.375Z" style="opacity:.4"></path>
      <path d="M20.25 2.25A2.248 2.248 0 0 1 22.5 0h11.25A2.248 2.248 0 0 1 36 2.25V13.5a2.248 2.248 0 0 1-2.25 2.25 2.248 2.248 0 0 1-2.25-2.25V7.685L17.34 21.84a2.253 2.253 0 0 1-3.186-3.185L28.314 4.5H22.5a2.248 2.248 0 0 1-2.25-2.25z"></path>
    </svg>
  </a>
  <div>
    <a href="#">TEXTTTE++EEEE</a>
    <br><br>
  </div>
</div>

→ Ссылка
Автор решения: Qwertiy

Так, я снова меняю своё мнение, должен ли работать код из вопроса. Если интересно, прошлые мысли можно посмотреть в истории ответа. Сейчас я задал вопрос на enSO с описанием, почему код должен работать, но пока я это писал, мне пришла в голову мысль, что потомки флекса считаются в изоляции друг от друга, поэтому всё же работать не должно. Но посмотрим, что ответят. В любом случае, решение - использовать грид.

На самом деле, если я правильно понял, что ты хочешь, тебе слева нужен квадрат той же ширины, что и высота правой части? Тогда используй грид:

UPDATE: Это работает в хроме, но не в FF. Вот тут есть другие ответы

main {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 1em;
}

.icon-link {
  aspect-ratio: 1;
  height: 100%;
}
<main>
  <a href="#" class="icon-link">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
      <path d="M0 7.875A5.623 5.623 0 0 1 5.625 2.25H13.5a2.248 2.248 0 0 1 2.25 2.25 2.248 2.248 0 0 1-2.25 2.25H5.625c-.619 0-1.125.506-1.125 1.125v22.5c0 .619.506 1.125 1.125 1.125h22.5c.619 0 1.125-.506 1.125-1.125V22.5a2.248 2.248 0 0 1 2.25-2.25 2.248 2.248 0 0 1 2.25 2.25v7.875A5.623 5.623 0 0 1 28.125 36h-22.5A5.623 5.623 0 0 1 0 30.375Z" style="opacity:.4"></path>
      <path d="M20.25 2.25A2.248 2.248 0 0 1 22.5 0h11.25A2.248 2.248 0 0 1 36 2.25V13.5a2.248 2.248 0 0 1-2.25 2.25 2.248 2.248 0 0 1-2.25-2.25V7.685L17.34 21.84a2.253 2.253 0 0 1-3.186-3.185L28.314 4.5H22.5a2.248 2.248 0 0 1-2.25-2.25z"></path>
    </svg>
  </a>
  <div>
    <a href="#">TEXTTTE++EEEE</a>
    <br>123<br>456
  </div>
</div>

А вообще, некликабельный гэп выглядит очень подозрительно и я думаю, что на самом деле надо ссылку снаружи:

a {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 1em;
}

svg {
  height: 100%;
}
<a href="#">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36">
    <path d="M0 7.875A5.623 5.623 0 0 1 5.625 2.25H13.5a2.248 2.248 0 0 1 2.25 2.25 2.248 2.248 0 0 1-2.25 2.25H5.625c-.619 0-1.125.506-1.125 1.125v22.5c0 .619.506 1.125 1.125 1.125h22.5c.619 0 1.125-.506 1.125-1.125V22.5a2.248 2.248 0 0 1 2.25-2.25 2.248 2.248 0 0 1 2.25 2.25v7.875A5.623 5.623 0 0 1 28.125 36h-22.5A5.623 5.623 0 0 1 0 30.375Z" style="opacity:.4"></path>
    <path d="M20.25 2.25A2.248 2.248 0 0 1 22.5 0h11.25A2.248 2.248 0 0 1 36 2.25V13.5a2.248 2.248 0 0 1-2.25 2.25 2.248 2.248 0 0 1-2.25-2.25V7.685L17.34 21.84a2.253 2.253 0 0 1-3.186-3.185L28.314 4.5H22.5a2.248 2.248 0 0 1-2.25-2.25z"></path>
  </svg>
  <div>
    TEXTTTE++EEEE
    <br>123<br>456
  </div>
</a>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.