Menü margin geht nicht?

Hallo,

ich habe folgenden Code:

HTML:

<div id="menu">
            <a href="euro-franken.html">Euro in Schweizer Franken</a>
            <a href="euro-krone.html">Euro in Schweizer Franken</a>
            <a href="euro-pfund.html">Euro in Schweizer Franken</a>
    </div>

CSS:

#menu {
  width: 45%;
  padding: 20px;
  display: none;
  min-height: 100%;
  background-color: rgb(71, 91, 107);
  position: fixed;
  z-index: 2;
  animation: fadeIn 0.8s;
}


@keyframes fadeIn {
  from {
    width: 0%;
  }
  to {
    width: 45%;
  }
}


#menu a {
  text-decoration: none;
  color: white;
  text-align: left;
  margin-bottom: 50px;
  border: 2px solid black;
  }
  

Nun macht der aber kein Abstand zwischen den Links. Warum nicht?

LG

Answer 1

[Babelfish]

Margin lässt sich nur auf Block-Elemente anwenden und nicht auf Inline wie A. Entweder du nutzt stattdessen padding-bottom oder du arbeitest mit Block-Elementen.

PS: Die Autokorrektur wollte gerade Pudding-bottom schreiben. 🤣

Woher ich das weiß: Berufserfahrung – Entwickle Webseiten seit über 25 Jahren.

Comments

[Lenny774]

passt.

[Babelfish]

@Lenny774

Generell würde ich dir für solche Layouts Flexbox ans Herz legen. Damit lässt sich die Positionierung deutlich einfacher machen und zum Beispiel mit justify-content:space-around hast du schöne gleichmäßige Abstände.

[Lenny774]

das ist leider das Problem, padding geht auch nicht.

Answer 2

[Baerenheini]

Dein geteilter Code sollte garnicht erst angezeigt werden. "Display: none" sorgt dafür, dass dieses Element und alle Childelemente nicht gerendert werden, also nicht sichtbar sind.

Für Menüleisten/Navigationsleisten sollte man normalerweise listen und bestimmte semantische Elemente, wie Nav-tags verwenden. Hier ein Beispiel. A-tags kannst du dann in ein Listenelement schreiben. A-tags können standardmäßig keine margin benutzen, solange sie keine definierte displayeigenschaft wie z.B. "block" oder "flex" haben.