Lernen auf W3schools: Display: inline-block; – Wofür bitte, wenn width und height fehlen?

[Waldfee68]

Hallo,

ich hätte bitte noch eine Frage. Derzeit lerne ich täglich auf W3Schools. Ich bin jedoch auf eine Sache gestoßen, die ich nicht verstehe und wo auch keine Erklärung dafür zu finden ist. Es geht um den folgenden Code:

<style>
a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 15px 25px;
  text-align: center;
  text-decoration: none;
**  display: inline-block;**
}

a:hover, a:active {
  background-color: red;
}
</style>

In der Erklärung, die ich online finden konnte, hieß es, dass "display: inline-block;" dann geschrieben wird, wenn man "width" und "height" hinzufügen möchte oder muss. Ich kann jedoch keine dieser beiden Elemente finden und verstehe deshalb nicht, weshalb es dort überhaupt steht. Hätte jemand bitte Zeit und Lust, mir dies zu erklären? Vielen lieben Dank! Herzliche Grüße und bleibt alle gesund!

Waldfee68

[Mr.Murphy]

Inline-Block wurde früher hauptsächlich verwendet, um Elemente mit Abstand nebeneinander darzustellen, zum Beispiel bei Navigationen.

Es wird zwar auch zukünftig von den Browsern unterstützt werden, wird aber dank Flexbox (display: flex) und CSS-Grid (display: grid) nicht mehr benötigt. Zumal es einige Nebenwirkungen hat, die grade Neulinge überfordern.

[Waldfee68]

Lieber Mr. Murphy, vielen Dank! Eine tolle Erklärung. Es steht noch in W3Schools im HTML-Bereich. Soweit ich weiß, geht W3Schools später auf das Flexbox-Modell ein. Danke! :-) Viele Grüße Waldfee68

[Rolf B]

Hallo Waldfee68,

inline-block hat noch andere Eigenschaften. Ein normales inline-Element kann mittendrin umgebrochen werden, was bei einem Link störend wirken kann. Mit inline-block bleibt das a Element auf einer Zeile, es sei denn, es passt als ganzes nicht mehr in seinen Container. Erst dann wird sein Inhalt umgebrochen.

Es gibt Fälle, wo sowas nützlich ist.

text-align: center; in einem inline-block Element ohne width ist übrigens auch Unsinn, wenn die Box so groß ist wie ihr Inhalt, bewirkt Zentrieren nichts.

Rolf

[Gunnar Bittersmann]

@@Rolf B

inline-block hat noch andere Eigenschaften. Ein normales inline-Element kann mittendrin umgebrochen werden, was bei einem Link störend wirken kann. Mit inline-block bleibt das a Element auf einer Zeile, es sei denn, es passt als ganzes nicht mehr in seinen Container. Erst dann wird sein Inhalt umgebrochen.

In der Zeit, wo ich ein Beispiel gecoded habe, hast du die Erklärung dazu geschrieben. Fein, dann kann ich mir die ja sparen.

😷 LLAP

[Waldfee68]

Lieber Rolf, vielen lieben Dank! Gruß Waldfee68

[Gunnar Bittersmann]

@@Waldfee68

a:link, a:visited

Der Selektor mach keinen Sinn. Das tut dasselbe wie a (von der Spezifität abgesehen, die man hier aber wohl nicht braucht).

a:hover, a:active

Oft sollte man das, was man für :hover tut, auch für :focus (Tastaturbedienung) tun.

😷 LLAP

[Rolf B]

Hallo Gunnar,

a:link (...) tut dasselbe wie a

Dass ich Dir mal "Nein" sagen muss...

<a>Hallo Welt>
<a href="https://goo.gl/maps/oVU3CNYjzBaZck57A">Hallo Welt</a>

a:link styled nur den zweiten.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Dass ich Dir mal "Nein" sagen muss...

Ich mache hier bestimmt mehr Fehler als die, die gefunden werden. 😆

<a>Hallo Welt>
<a href="https://goo.gl/maps/oVU3CNYjzBaZck57A">Hallo Welt</a>

a:link styled nur den zweiten.

Aber auch nur, solange der Link nicht besucht wurde. :link tut nämlich nicht das, was die Benennung vermuten lässt. Anders gesagt: :link ist völlig falsch benannt.

Deshalb sprach ich auch über a:link, a:visited. Aber du hast recht, das stylt nur Links, keine a-Elemente ohne href-Attribut.

Ich ändere meine Aussage zu: a:link, a:visited tut dasselbe wie a[href] – und das auch mit derselben Spezifität.

Oder wie a:any-link, was mittlerweile auch von allen relevanten Browsern außer Opera Mini unterstützt wird. (Es sei den, man ist in der misslichen Lage eine Zielgruppe zu haben, für die der IE noch irgendeine Relevanz hat.)

😷 LLAP