molily: Ist <br /> zum Bildabstand korrekt?

Beitrag lesen

Hallo, Dmitri,

margin-bottom würde ich jedoch nicht auf das img-Element anwenden.
Warum nicht? Steht das irgendwo auf den W3C Seiten? Schilesslich hat man früher auch vspace und hspace benutzt.

Naja, zuerst einmal müssen laut W3C-Spezifikation alle Inline-Elemente und Textanker in Blockelementen untergebracht sein, die strukturierend wirken. Und wenn ich mir deine Vorgabe anschaue:

[Bild]
  (Absatz/Umbruch/ein fest definierter Abstand)
[Text + Links]

Würde ich das intuitiv so umsetzen:

<p>[Bild (img-Element)]</p>
<p>[Text + Links]</p>

Wobei den p-Elemente jeweils die gewünschten Ränder/Außenabstände zugeordnet werden.

Logischer wäre ein <p style="margin-bottom:...;"><img src="logo.png" ... /></p> und entsprechende margins beim Textabsatz darunter.

Wenn schon nicht im <img>, dann in <div>, aber bestimmt nicht in <p>.

Jein - ob man hier ein div oder p benutzt, ist pragmatisch gesehen völlig egal, denn man kann auf beide dieselben margin-Eigenschaften anwenden. Da div aber nur einen Bereich definiert und demnach in den meisten Browsern nur einen simplen Zeilenumbruch auslöst (plus margin natürlich), würde ich für die Verwendung des p-Elements plädieren. p steht für Paragraph/Absatz und ist im Gegensatz zum div-Element brauchbarer, um die Struktur der Seite zu beschreiben. Dadurch würden auch bspw. Textbrowser den Aufbau der Seite nachvollziehen können und einen Abstand zwischen Logo und Text/Links anzeigen.
Ich ging davon aus, dass du die Seite sowieso mit Blockelementen strukturierst, deswegen schlug ich vor, die margin für das die Grafik umgebende Blockelement zu notieren - sei es nun div oder p.

Ich habe alle drei Möglichkeiten noch einmal ausprobiert: ob <br /> und margin-bottom beim img, ob div mit margin-bottom oder ob p mit margin-bottom und margin-top - das Ergebnis ist dasselbe, der Abstand lässt sich einfach regeln. Ich persönlich finde aus den genannten Gründen die Variante mit dem p-Element am besten.

Wie meinst du das? "CSS-Layout"?

Anstatt Tabellenlayout oder einem Seitenlayout, welches Frames benutzt, kann man mit den CSS-Eigenschaften float (und dann clear) und position ebenso Elemente nebeneinander und voneinander abhängig positionieren; dies ist die Layouttechnik der Zukunft.

Mathias