Bei Anzeige von inline Elementen fügt der Browser Abstände ein

[Viktoria]

Hallo zusammen,

ich habe folgendes Problem:
ich möchte mehrere Span-Elemente nebeneinander anzeigen. Das Problem welches dabei entsteht ist, dass sowohl IE als auch Firefox einen Abstand zwischen die Elemente einfügen.

Der Code sieht so aus, dass ich in einem <div> drei <span> habe welche jeweils einen Link enthalten.

Der oben beschriebene Effekt tritt nur dann auf, wenn ich im code das <span> Element und das Link Element in eine Codezeile schreibe. Sobald ich die Elemente in unterschiedliche Zeilen schreibe tritt der Effekt nicht auf.

Leider werden mehrere Leute an den HTML Seiten arbeiten und ich kann nicht wissen wie die Entwickler ihren Code gestalten werden.

Daher meine Frage: gibt es eine Möglichkeit das Aussehen einheitlich zu gestalten unabhängig davon wie der Code geschrieben ist?

Anbei noch mein Beispielcode:
span {
 margin: 0px;
 padding:0px;
 background-color: #B4C6D9;
}
//Darstellung ohne Abstand
<div>
 <span>
  <a  href="#">Link 1</a>
 </span>
 <span>
  <a  href="#">Link 2</a>
 </span>
 <span>
  <a  href="#">Link 3</a>
 </span>
</div>

//Darstellung mit Abstand
<div>
 <span><a  href="#">Link 1</a></span>
 <span><a  href="#">Link 2</a></span>
 <span><a  href="#">Link 3</a></span>
</div>

Vielen Dank im Voraus
Liebe Grüße
Viktoria

[Cheatah]

Hi,

ich möchte mehrere Span-Elemente nebeneinander anzeigen. Das Problem welches dabei entsteht ist, dass sowohl IE als auch Firefox einen Abstand zwischen die Elemente einfügen.

wie bei Inline-Elementen üblich. Es sind bei Dir doch Inline-Elemente, oder?

Der Code sieht so aus, dass ich in einem <div> drei <span> habe welche jeweils einen Link enthalten.

Das klingt extrem nach einer Liste. Warum verwendest Du keine?

Cheatah

[Viktoria]

Hallo Cheatah,

ja, es sind inline Elemente. Bekommt man da den Abstand nicht weg? Und wieso verhält es sich unterschiedlich je nachdem wie man den Quellcode gestaltet?

Das klingt extrem nach einer Liste. Warum verwendest Du keine?

Weil es keine Liste ist. Die Links sollen nebeneinander dargestellt werden. Die <span>s drumrum benötige ich nur wegen einigen Formatierungen die später noch folgen. In diesem Beispiel habe ich die Formatierungen auf ein minimum reduziert.

Liebe Grüße
Viktoria

[wahsaga]

hi,

Das klingt extrem nach einer Liste. Warum verwendest Du keine?

Weil es keine Liste ist.

Warum sollte eine Auflistung von Links keine Liste sein?

Die Links sollen nebeneinander dargestellt werden.

Also hast du den Schluss, dass es sich um keine Liste handele, lediglich aus der (später) gewünschten _Darstellung_ gezogen? Falls ja - fataler Fehler, vermeide ihn zukünftig.

Zahlreiche Beispiele, wie du (link-)Listen nahezu nach belieben formatierst, bietet dir Listamatic.

gruß,
wahsaga

[Der Martin]

Hallo Viktoria,

ja, es sind inline Elemente. Bekommt man da den Abstand nicht weg?

doch, sicher. Aber solange du in deinem Stylesheet keine Angaben dazu machst, gelten die Defaultwerte. Die können allerdings von Browser zu Browser unterschiedlich sein. Willst du reproduzierbare Ergebnisse, dann musst du selbst die Abstände definieren (margin, padding).

Und wieso verhält es sich unterschiedlich je nachdem wie man den Quellcode gestaltet?

Das irritiert mich in deinem Beispiel auch - vor allem, dass du sagst, da seien Abstände, wenn du alles in eine Zeile schreibst, während die Abstände verschwinden, wenn du Zeilenumbrüche im Quelltext hast. Ich hätte es umgekehrt erwartet, weil ja jeder Zeilenumbruch auch als Whitespace, also wie ein Leerzeichen betrachtet wird.
Bist du sicher, dass du dich bei der Beschreibung nicht vertan hast?

Das klingt extrem nach einer Liste. Warum verwendest Du keine?
Weil es keine Liste ist. Die Links sollen nebeneinander dargestellt werden.

Das spielt doch keine Rolle. All das sind ja gestalterische Aspekte, die man mit CSS beliebig regulieren kann (hier z.B. display:inline oder float).

Die <span>s drumrum benötige ich nur wegen einigen Formatierungen die später noch folgen.

Da würde ich dir doch stattdessen empfehlen, die Links direkt zu formatieren anstatt um jeden Link noch ein span zu legen (es sei denn, es soll außer dem Link noch weiteren Inhalt haben). Eventuell kannst du sogar darauf verzichten, sie mit IDs oder Klassen zu kennzeichnen, wenn du dem übergeordneten div eine ID gibst.

So long,
 Martin