Können Anker-Tags () eine bestimmte Breite und Höhe in Pixeln haben?

Hintergrund:

Beachten Sie den folgenden CSS-Code:

<code class="css">li {
  width: 32px;
  height: 32px;
  background-color: orange;
}

li a {
  width: 32px;
  height: 32px;
  background-color: red;
}</code>

HTML:

<code class="html"><li><a href="#">Something</a></li></code>

Lösung:

Um die Breiten- und Höhenanpassung für Anker-Tags zu ermöglichen, ist es notwendig, deren Anzeigeeigenschaft zu ändern:

<code class="css">li a {
  display: block;  // or display: inline-block;
  width: 32px;
  height: 32px;
  background-color: red;
}</code>

Durch die Einstellung display: block oder display: inline-block wird das Anker-Tag zu einem Element auf Inline-Ebene, das sowohl Breite als auch Höhe unterstützt. Auf diese Weise kann das Anker-Tag seinen Textinhalt beibehalten und gleichzeitig ein Hintergrundbild anzeigen.