padding-bottom bei Inline-Elementen

[Andreas]

Hallo,

ich suche nach dem einfachsten Weg, bei einem Link einen Abstand nach unten zu definieren. Zum Beispiel:

<a href="#" style="padding-bottom:10px">Link</a>

Das funktioniert nur leider nicht. Wäre ja auch zu einfach …

Hat jemand eine Idee?

[Gernot Back]

Hallo Andreas,

wenn du deinem Link eine größere Line-height spendierst, erhält die gesamte Zeile, auf der er sich befindet, diese Höhe. Mit einem Vertical-Align-Pixel-Wert kannst du den Link auch entsprechend von "seiner" Zeile abheben. Den Abstand der Gesamtzeile zur vorherigen und der nachfolgenden wirst du aber auch damit beeinflussen.

Gruß Gernot

[Christoph]

Hallo Andreas.

Hat jemand eine Idee?

Kommt drauf an, was du machen möchtest...
Befindet sich der Link im Fließtext (wie Gernot annimmt), dann würde sich

position:relative; bottom:10px;

anbieten; sollte dies nicht der Fall sein, hilft dir vermutlich

display:block;

Christoph

[Andreas]

Danke für eure Tipps. Das Problem ist, dass ich eine Hintergrundfarbe definiert habe und bei line-height oder position:relative kein innerer Abstand zustande kommt, sondern ein, in gewisser Weise, äußerer. Soll heißen, die Hintergrundfarbe füllt nur den Bereich, in dem Text steht. Alles andere bleibt Weiß. Eben auch der Zeilenabstand.

[Christoph]

Hallo.

Zwar nicht wirklich elegant, aber man könnte ein weiteres Element zur Formatierung hinzufügen...
In etwa so (nicht getestet):

  
<style type="text/css">  
 a { background: red; }  
 a span { background: inherit; position: relative; bottom: 3px; }  
</style>  
  
<p>  
 Hallo - dies ist<br>  
 ein <a href="#"><span>mehrzeiliger</span></a> Test.<br>  
 Ist es das, was du willst?  
</p>  

Christoph