Margin wird ignoriert

[Mandala]

Hallo,

kurze Frage zu MARGIN:

Die style-Anweisung "margin-top: 20px;" wird in meinem Code [siehe folgend] geflissentlich ignoriert; --> der LOS! - Link 'klebt' an vorhergehendem Content, egal welche margins ich ihm setze.

Warum eigentlich? [bzw. wie bringe ich den Link dazu, seine MARGIN-Anweisungen zu befolgen?]

HTML

<p>Zugangsdaten als Cookie speichern</p>

<p><a class="navlink" href="">LOS!</a></p>

CSS

.navlink {
	text-decoration: none;
	
	/* wird nicht umgesetzt:*/
	margin-top: 10px;
	
	padding: 15px;
	color: white;
	background-color: red;
}

Dank!

[Matthias Apsel]

Hallo Mandala,

Die style-Anweisung "margin-top: 20px;" wird in meinem Code [siehe folgend] geflissentlich ignoriert; --> der LOS! - Link 'klebt' an vorhergehendem Content, egal welche margins ich ihm setze.

Warum eigentlich?

Weil der Link ein inline-Element ist. Er ist so hoch wie seine Zeile.

[bzw. wie bringe ich den Link dazu, seine MARGIN-Anweisungen zu befolgen?]

Ändere die display-Eigenschaft.

Dank!

Bitt.

Bis demnächst
Matthias

[MudGuard]

Hi,

Die style-Anweisung "margin-top: 20px;" wird in meinem Code [siehe folgend] geflissentlich ignoriert; --> der LOS! - Link 'klebt' an vorhergehendem Content, egal welche margins ich ihm setze.

Warum eigentlich? [bzw. wie bringe ich den Link dazu, seine MARGIN-Anweisungen zu befolgen?]

margin-top, margin-bottom: "These properties have no effect on non-replaced inline elements."
Siehe CSS 2.1, margin-top

Uch vermute, das ist auch in den neueren Versionen ebenso.

==> gib den Margin nicht dem a, sondern dem p.

cu,
Andreas a/k/a MudGuard