Zeilenabstand

[AirMax]

Hallo zusammen,

ich habe eine Überschrift und einen Absatz, deren margins ich auf NULL und line-heights auf 100% gesetzt habe. Jetzt möchte ich zwischen der Überschrift und dem Absatz einen kleinen Freiraum lassen, der genau einem Zeilenabstand entspricht. In HTML würde das (theoretisch) folgendes bedeuten:

  
<h1>Überschrift</h1>  
<p></p>  
<p>Absatz</p>  

Kann man das margin-top: XX; für den Absatz irgendwie errechnen oder muss man einfach probieren, bis es passt? Vielleicht hat jemand schon das gleiche Problem gehabt?!

Danke & Gruss

[suit]

Kann man das margin-top: XX; für den Absatz irgendwie errechnen oder muss man einfach probieren, bis es passt? Vielleicht hat jemand schon das gleiche Problem gehabt?!

ich würde tendentiell sämtliche margins auf 0 reduzieren und dann nach dem element wieder hinzufügen

so etwa:

body {  
  font-size: 1em;  
  line-height: 1.5em;  
}  
  
h1 {  
  padding: 0;  
  margin: 0;  
  font-size: 2em;  
  line-height: 1.5em;  
}  
  
p {  
  padding: 0;  
  margin: 0 0 1.5em 0;  
}  

[AirMax]

ich würde tendentiell sämtliche margins auf 0 reduzieren und dann nach dem element wieder hinzufügen

so etwa:

body {

font-size: 1em;
  line-height: 1.5em;
}

h1 {
  padding: 0;
  margin: 0;
  font-size: 2em;
  line-height: 1.5em;
}

p {
  padding: 0;
  margin: 0 0 1.5em 0;
}

  
Klar. Hab' ich ja. Der Abstand des Absatzes zur Überschrift wäre demnach  
~~~css
  
p {  
   margin: 3em 0 0;  

> }  

???

[Cheatah]

Hi,

ich habe eine Überschrift und einen Absatz, deren margins ich auf NULL und line-heights auf 100% gesetzt habe.

line-height:100% ist im Normalfall eine reichlich schlechte Idee.

Jetzt möchte ich zwischen der Überschrift und dem Absatz einen kleinen Freiraum lassen, der genau einem Zeilenabstand entspricht.

Zeilenabstand gibt es nicht, nur Zeilenhöhe. Wenn ich Dich richtig verstehe, möchtest Du insbesondere unter der Überschrift einen Abstand haben, nicht über dem ersten Absatz.

Kann man das margin-top: XX; für den Absatz irgendwie errechnen

Ja, indem Du als Einheit em verwendest und die Schriftgrößen alle relativ zueinander betrachtest. Dann ist das nicht mehr als ein Rechenexempel mit einer Handvoll Werten, einigen Multiplikationen und Divisionen und vermutlich nur einer Subtraktion.

Cheatah

[AirMax]

line-height:100% ist im Normalfall eine reichlich schlechte Idee.

Sie ist auch nicht 100%, sondern 155%. Aber 1. werde ich wohl auf 150% gehen und 2. wieder auf "em" umsteigen. Ich hatte das Gefühl, das z.B. FF jedes einzelne % der Line-height-Angabe berücksichtigt. Bei einer em-Angabe rundet er glaube auf eine Genauigkeit von 0.5. Aber ich will ja nicht kleinkarriert werden.

Zeilenabstand gibt es nicht, nur Zeilenhöhe.

Entschuldige!

Wenn ich Dich richtig verstehe, möchtest Du insbesondere unter der Überschrift einen Abstand haben, nicht über dem ersten Absatz.
Der erste "leere" Absatz <p></p>IST mein Zwischenraum!

Ja, indem Du als Einheit em verwendest und die Schriftgrößen alle relativ zueinander betrachtest. Dann ist das nicht mehr als ein Rechenexempel mit einer Handvoll Werten, einigen Multiplikationen und Divisionen und vermutlich nur einer Subtraktion.

Ich werde mal jonglieren...

Danke!

[ChrisB]

Hi,

Wenn ich Dich richtig verstehe, möchtest Du insbesondere unter der Überschrift einen Abstand haben, nicht über dem ersten Absatz.
Der erste "leere" Absatz <p></p>IST mein Zwischenraum!

Ich dachte, du wolltest sinnvolles HTML schreiben?
Was zum Geier sollen leere Absätze, die einzig und allein optischen Zwecken dienen, darin verloren haben?

MfG ChrisB

[AirMax]

Hi ChrisB

Ich dachte, du wolltest sinnvolles HTML schreiben?
Was zum Geier sollen leere Absätze, die einzig und allein optischen Zwecken dienen, darin verloren haben?

Das HTML-code sollte doch nur verdeutlichen, was ich theoretisch erreichen will. Dass leere Absätze und Gestaltungselemente inHTML nichts zu suchen habe ist mir (mittlerweile) klar!

Gruss

[suit]

Das HTML-code sollte doch nur verdeutlichen, was ich theoretisch erreichen will. Dass leere Absätze und Gestaltungselemente inHTML nichts zu suchen habe ist mir (mittlerweile) klar!

Warum erwähnst du es dann?

[AirMax]

Warum erwähnst du es dann?

Weil ich dachte, dass man so vielleicht sofort versteht, was ich meine. Aber der "Schuss ging ja wohl nach hinten los" ...

[suit]

Weil ich dachte, dass man so vielleicht sofort versteht, was ich meine. Aber der "Schuss ging ja wohl nach hinten los" ...

In diesem Forum versteht man dich vor allem, wenn du fachlich korrekt und auf das wesentliche reduziert Fragen stellst :) irgendwelche Ausschmückungen, die sogar ablenken sind nicht erforderlich.

[AirMax]

In diesem Forum versteht man dich vor allem, wenn du fachlich korrekt und auf das wesentliche reduziert Fragen stellst :) irgendwelche Ausschmückungen, die sogar ablenken sind nicht erforderlich.

Hab's verstanden :-P

[suit]

Hab's verstanden :-P

Zunge rein :D

[Cheatah]

Hi,

Weil ich dachte, dass man so vielleicht sofort versteht, was ich meine. Aber der "Schuss ging ja wohl nach hinten los" ...

ja, aber meiner. Ich hatte Dich von Anfang an richtig verstanden - jetzt lies bitte meine Antwort mit diesem Wissen noch einmal. Tipp: Gunnar hat mich ebenfalls richtig verstanden, allerdings halte ich seine Lösung für problematisch.

Cheatah

[AirMax]

Hi Cheatah,

ja, aber meiner. Ich hatte Dich von Anfang an richtig verstanden - jetzt lies bitte meine Antwort mit diesem Wissen noch einmal. Tipp: Gunnar hat mich ebenfalls richtig verstanden, allerdings halte ich seine Lösung für problematisch.

Ich habe mal eine kleine Grafik (PDF) vorbereitet, die mein Problem beschreibt. Außerdem konnte ich auf diese Weise feststellen, dass mein Problem eigentlich gar keins ist, da die Antwort ziemlich einfach ist. Das Margin (egal ob für die Überschrift als margin-bottom; oder für den Absatz als margin-top;. Der Wert entspricht genau EINEM Zeilenabstand!

Gruß

[suit]

Der Wert entspricht genau EINEM Zeilenabstand!

Aber nur wenn die Schriftgröße bei Überschrift und Text gleichgroß ist.

1.25 em bei 18 px Schriftgröße != 1.25 em bei 12 px Schriftgröße

[suit]

line-height:100% ist im Normalfall eine reichlich schlechte Idee.
Sie ist auch nicht 100%, sondern 155%. Aber 1. werde ich wohl auf 150% gehen und 2. wieder auf "em" umsteigen. Ich hatte das Gefühl, das z.B. FF jedes einzelne % der Line-height-Angabe berücksichtigt. Bei einer em-Angabe rundet er glaube auf eine Genauigkeit von 0.5. Aber ich will ja nicht kleinkarriert werden.

afaik interpretiert Firefox bei em 3 machkommastellen

Du solltest, wie in meinem Beispiel, zahlen verwenden, die man einfach berechnen kann.

12 oder 16 als basis für deine schriftgröße

12 ist durch 1, 2, 3, 4 und 6 ohne Rest teilbar
16 ist durch 1, 2, 4 und 8 ohne Rest teilbar

du kannst also z.B. 16 px Schriftgröße und 20px Zeilenhöhe nehmen (1.25em).

Wenn jemand doch ander schrifgrößen einstellt, wird halt gerundet. aber zumindest sorgst du bei einer sehr verbreiteten defaultschriftgröße von 16 oder 12 pixeln für eine ordentliche Darstellung.

[Gunnar Bittersmann]

@@Cheatah:

nuqneH

Wenn ich Dich richtig verstehe, möchtest Du insbesondere unter der Überschrift einen Abstand haben, nicht über dem ersten Absatz.

?? Warum? Da kann ich dir nicht folgen.

Dann ist das nicht mehr als ein Rechenexempel mit einer Handvoll Werten, einigen Multiplikationen und Divisionen und vermutlich nur einer Subtraktion.

Gibt man nicht 'margin-bottom' für 'h1', sondern 'margin-top' für 'h1+p' an, dürften einige Multiplikationen und Divisionen entfallen.

Qapla'

[suit]

Gibt man nicht 'margin-bottom' für 'h1', sondern 'margin-top' für 'h1+p' an, dürften einige Multiplikationen und Divisionen entfallen.

Wenn man hingegen Konseqent bei allen entsprechenden blöcken den oberen Außenabstand eliminiert, kann man praktisch und ohne viel denkerei mit margin-bottom arbeiten (durchgehend) und erspart sich auch geschichten wie die von dir genannte.

[Gunnar Bittersmann]

@@AirMax:

nuqneH

ich habe eine Überschrift und einen Absatz, deren margins ich auf NULL und line-heights auf 100% gesetzt habe.

Das heißt, der berechnete Wert der Zeilenhöhe ist gleich der berechneten Schriftgröße. [CSS2 §10.8.1] (Der Lesbarkeit des Textes tust du damit vermutlich keinen guten Dienst.)

Kann man das margin-top: XX; für den Absatz irgendwie errechnen

"1em" ist genau die Schriftgröße. [CSS2 §4.3.2]

Qapla'

[AirMax]

Das heißt, der berechnete Wert der Zeilenhöhe ist gleich der berechneten Schriftgröße. [CSS2 §10.8.1] (Der Lesbarkeit des Textes tust du damit vermutlich keinen guten Dienst.)

"Weil sich die Höhe einer inzeiligen Box von der Schriftgröße des Texts in der Box unterscheiden kann (z.B. 'line-height' > 1em), kann es Platz oberhalb und unterhalb der dargestellten Glyphen geben. Die Differenz zwischen der Schriftgröße und dem berechneten Wert von 'line-height' wird auch als Durchschuss bezeichnet. Die Hälfte des Durchschusses wird als Halb-Durchschuss bezeichnet."

Also: Bei line-height: 1.5em

Halb-Durchschuss: 0.375em
Schriftgrösse: 0.75em
Halb-Durchschuss: 0.375em

[Gunnar Bittersmann]

@@AirMax:

nuqneH

Also: Bei line-height: 1.5em

Halb-Durchschuss: 0.375em
Schriftgrösse: 0.75em
Halb-Durchschuss: 0.375em

Nein. Sondern:

Halb-Durchschuss: 0.25em
Schriftgröße: 1em
Halb-Durchschuss: 0.25em

In deinem Fall also: Bei line-height: 100%

Halb-Durchschuss: 0
Schriftgröße: 1em
Halb-Durchschuss: 0

Die Zeilen kleben aneinander; der Text ist schlecht lesbar.

Qapla'