• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

Abstand zwischen Linkbildern

firefexx

firefexx

New member
Hi, ich habe einen Haufen kleine Bilder (150x150) die alle nebeneinander und untereinander stehen. Ganz einfach aneinander gereit.
Code: 
<a ...><img ... /></a>
<a ...><img ... /></a>
<a ...><img ... /></a>
<a ...><img ... /></a>
<a ...><img ... /></a>
.............
Wenn ich die CSS Datei leer lasse haben die Linkbilder einen Abstand von ca. 5px zueinander. In alle Richtungen. Mir ist schleierhaft woher dieser Abstand kommt.
Das Problem: Wenn ich einen größeren Abstand haben möchte und etwa
Code: 
... a {
    margin: 15px;
}
notiere, wirkt sich diese Angabe nur auf den Abstand links und rechts der Bilder aus. Oben und unten bleibt der Abstand bei den geschätzten 5px.

Was ist da los und was kann ich machen??

VG
 
a ist ein Inline Element. Du müsstest es zu einem Blockelement machen, indem du dem CSS hinzufügst
Code: 
display: inline-block;
Dann lassen sich Abstände definieren. Oder du schreibst deine Angaben statt für a für img.
Code: 
img {
margin: 15px;
}
 
Das Ganze hat nichts mit dem a-Element zu tun, sondern ist eine Eigenart vom img.

Code: 
<html>
<head>
<title>Mehrere img a in einer zeile</title>
<style type="text/css">
img {margin: 0px; padding:0;}
</style>
</head>
<body>
<h2>test</h2>
<img src="blau100px.png" border="0" alt="">
<img src="blau100px.png" border="0" alt="">
<br>
<img src="blau100px.png" border="0" alt=""><img src="blau100px.png" border="0" alt="">

</body>
</html>

Die ersten beiden img haben einen Abstand, die in einer Zeile stehenden nicht.
Eine (nicht sehr schöne) Lösung wäre ein margin=-5px bei mehrzeiliger Schreibweise.
 
Das hat NICHTS mit den <img> zu tun! Der Zeilenumbruch wird nur einfach als ein Leerzeichen gesehen und deswegen in einer Textnode auch angezeigt... und die braucht Platz.
Code: 
<a style="background-color: red;">hallo</a>
<a style="background-color: blue;">was</a>
<br>
<a style="background-color: red;">hallo</a><a style="background-color: blue;">was</a>
 
Hat es da nicht etwas gegeben um den Zeilenumbruch zu unterdrücken ?
(Alles in einer Zeile wird ja unübersichtlich).
 
anna55 schrieb:
a ist ein Inline Element. Du müsstest es zu einem Blockelement machen, indem du dem CSS hinzufügst
Code: 
display: inline-block;
Dann lassen sich Abstände definieren.
Zum Vergrößern anklicken....

Danke sehr!! Das war es. Und dazu noch wieder etwas gelernt. Kannte bisher nur block, inline und none als Werte für display :)

VG
 
Dankeschön, allerdings halte ich nicht viel von Workarounds für veraltete Browser. Da ist man ja ewig mit beschäftigt und das nur weil entweder der Browserhersteller zu blöd ist um ein vernünftiges Produkt zu entwickeln oder der Anwender zu faul ist um auf einen aktuellen Browser umzusteigen. Auf beides mag ich nicht wirklich Rücksicht nehmen.
Der Internet Explorer macht ne Menge Quatsch und was hat Microsoft davon? Mehr und mehr auch eher PC unerfahrene Leute steigen auf Firefox um.
Und die Leute darüber zu informieren dass sie einen veralteten Browser benutzen kann man ja auch recht leicht durch ein Script dass einen (dezent wohlgemerkt!) darauf aufmerksam macht, dass es eine neuere, sprich bessere Version gibt. Und das ist ja nicht nur wegen der Rendering Engine wichtig. Es gibt auch genug sicherheitsrelevante Gründe die dafür sprechen. :)

VG
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben