Abstandhalter - Mehr Platz in der Liste

Aus Listen lässt sich so manches herausholen. Gleich ob farbig, umrahmt oder mit schickeren Listenzeichen. Auch die Abstände der einzelnen Listenelemente zueinander können angepaßt werden.

Sollen die Elemente auseinander gezogen werden, ist das mit <p> oder <br> kein Problem. Entweder formatiert man die Listenelemente als Absatz (p) oder setzten zwei Umbrüche dazu (br).

Wie so oft leistet CSS hier mehr. "margin-top", also der Abstand nach oben, sorgt für einen beliebigen Abstand der Einzelelemente zueinander. Die können enger zusammen rücken oder gedehnt werden. Ganz so wie es das Design erfordert und die Übersichtlichkeit verlangt.

Standardliste

• Burgerking
• McDonalds
• Wendy's
• Superburger

<ul>
<li>Burgerking</li>
<li>McDonalds</li>
<li>Wendy's</li>
<li>Superburger</li>
</ul>

Vergrößerte Abstände mit <p>

• Burgerking

• McDonalds

• Wendy's

• Superburger

<ul>
<li><p>Burgerking</p></li>
<li><p>McDonalds</p></li>
<li><p>Wendy's</p></li>
<li><p>Superburger</p></li>
</ul>

Vergrößerte Abstände mit <br>

• Burgerking
  
  
• McDonalds
  
  
• Wendy's
  
  
• Superburger
  
  

<ul>
<li>Burgerking<br><br></li>
<li>McDonalds<br><br></li>
<li>Wendy's<br><br></li>
<li>Superburger<br><br></li>
</ul>

CSS kann mehr: 2px Abstand

• Burgerking
• McDonalds
• Wendy's
• Superburger

<ul>
<li style="margin-top: 2px";>Burgerking</li>
<li style="margin-top: 2px";>McDonalds</li>
<li style="margin-top: 2px";>Wendy's</li>
<li style="margin-top: 2px";>Superburger</li>
</ul>

CSS kann mehr: 4px Abstand

• Burgerking
• McDonalds
• Wendy's
• Superburger

<ul>
<li style="margin-top: 4px";>Burgerking</li>
<li style="margin-top: 4px";>McDonalds</li>
<li style="margin-top: 4px";>Wendy's</li>
<li style="margin-top: 4px";>Superburger</li>
</ul>

CSS kann mehr: 22px Abstand

• Burgerking
• McDonalds
• Wendy's
• Superburger

<ul>
<li style="margin-top: 22px";>Burgerking</li>
<li style="margin-top: 22px";>McDonalds</li>
<li style="margin-top: 22px";>Wendy's</li>
<li style="margin-top: 22px";>Superburger</li>
</ul>

Artikel, die Sie auch interessieren könnten:

Listenzeichen mit Mauseffekt
JavaScript macht's möglich. Ab sofort können auch Listen auf Mausberührung reagieren, und das auf ganz verschiedene Art und Weise.