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

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

--
Auch der längste Weg beginnt mit dem ersten Schritt. (Chinesisches Sprichwort) Kein Weg ist lang mit einem Freund an der Seite. (Chinesisches Sprichwort)
(URL Spam entfernt)
  1. 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.

    1. 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

      --
      Auch der längste Weg beginnt mit dem ersten Schritt. (Chinesisches Sprichwort) Kein Weg ist lang mit einem Freund an der Seite. (Chinesisches Sprichwort) [SPAM vom Moderator gelöscht]
  2. 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

    --
    sumpsi - posui - obstruxi
    1. @@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

      --
      “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
    2. Lieber Rolf, vielen lieben Dank! Gruß Waldfee68

      --
      Auch der längste Weg beginnt mit dem ersten Schritt. (Chinesisches Sprichwort) Kein Weg ist lang mit einem Freund an der Seite. (Chinesisches Sprichwort) [SPAM vom Moderator gelöscht]
  3. @@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

    --
    “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon
    1. 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

      --
      sumpsi - posui - obstruxi
      1. @@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

        --
        “When I was 5 years old, my mother always told me that happiness was the key to life. When I went to school, they asked me what I wanted to be when I grew up. I wrote down ‘happy.’ They told me I didn’t understand the assignment, and I told them they didn’t understand life.” —John Lennon