✔ Kindselektor HTML5

[Alice]

Hallo.

Wieso geht folgendes (CSS) nicht? Jemand eine Idee?

<div id="main">
   <nav>
      <span>...</span>
  </nav>
</div>

#main
{
width: 100%;
}

#main > nav
{
padding: 5px;
}

#main > nav > span
{
margin-right: 2px;
}

Alles bis auf "nav" funktioniert. Selbst "main > nav > span" funktioniert.

Was mache ich falsch? Was sehe ich nicht?

 

[SpiceLab]

Alles bis auf "nav" funktioniert. Selbst "main > nav > span" funktioniert.

Was mache ich falsch? Was sehe ich nicht?

Es verhält sich genau entgegengesetzt, denn das <span>-Element ist ein sog. Inline-Element.

#main > nav > span {display:block;margin-right:2px}

oder

#main > nav > span {display:inline-block;margin-right:2px}

Sofern erwünscht bzw. praktikabel kann hier alternativ auch die float-Eigenschaft (left o. right) deklariert werden.

[edit]Tipp-Ex[/edit]​

 

[Alice]

Hatte nur ein "Cache" Problem.

Das Problem waren nicht die "Eigenschafften" (CSS) sondern, dass die Eigenschaften überhaupt nicht mit den HTML-Elementen "verbunden" worden.

 

[SpiceLab]

Hatte nur ein "Cache" Problem.

Das Problem waren nicht die "Eigenschafften" (CSS) sondern, dass die Eigenschaften überhaupt nicht mit den HTML-Elementen "verbunden" worden.

Wie auch immer, die margin-right-Regel für das <span>-Element findet aus besagtem Grund in deinem CSS überhaupt keine Anwendung. Probeweise kannst du es mal mit einem höheren Wert versuchen, der deutlich sichtbar zu erkennen sein müßte, als die "2px", so z.B. "50px".

 

[jeipack]

@SpiceLab span (inline-Elemente) haben kein margin-top oder margin-bottom. Aber left und right haben sie sehr wohl.

 

[SpiceLab]

@SpiceLab span (inline-Elemente) haben kein margin-top oder margin-bottom. Aber left und right haben sie sehr wohl.

Ohne meine Empfehlung: http://jsfiddle.net/5su1qaL4/
Mit meiner Empfehlung: http://jsfiddle.net/gq8xdxso/

 

[SpiceLab]

Nachtrag: Man muß den Fall differenziert betrachten

margin-left funktioniert grundsätzlich, solange der Inhalt einzeilig ist, aber margin-right nur zu benachbarten Inline-Elementen. Soll das Inline-Element aber einen rechten Außenabstand zur Boxengrenze des Elternelements einhalten, wie im vorliegenden Fall, ist eine der angesprochenen Eigenschaften zusätzlich erforderlich, wie es mein Beispiel demonstriert.

 

[jeipack]

http://jsfiddle.net/5su1qaL4/1/
margin-right funktioniert, was du da aufzeigst ist der Unterschied zwichen inline-Objekt und block-Objekt

 

[SpiceLab]

http://jsfiddle.net/5su1qaL4/1/
margin-right funktioniert, was du da aufzeigst ist der Unterschied zwichen inline-Objekt und block-Objekt

Mein Reden, denn das umschließende <nav>-Element zählt zu den Block-Elementen

Und dein Beispiel trifft auf benachbarte Inline-Elemente zu.

margin-left funktioniert grundsätzlich, solange der Inhalt einzeilig ist, aber margin-right nur zu benachbarten Inline-Elementen.

[edit]Tipp-Ex[/edit]​

 

[Alice]

Leute, ich habe die Eigenschaften frei erfunden, damit da irgendetwas steht...