Frage zum <p>-Element

[Ingo Siemon]

Hallo

Ich habe da ein Problem mit dem <p>-Element.
Zu sehen ist das hier: http://spaceart.de/_Test2/index.htm

Es geht um den Text in diesen grauen, dünn umrandeten Boxen.
Im Internet-Explorer sieht es so aus, wie ich es gern hätte.
Aber im Firefox und Opera ist jeweils oben und unten vom Text
noch ein Abstand zum Rahmen der umschließenden di-Box.

Mir ist klar, dass ich den <p>-Elementen auch direkt die
Formartierung mit diesen Boxen per CSS zuweisen könnte.
Aber dann wird ja für jeden Text-Absatz eine neue solche
dünn umrandete graue Box "erzeugt".

Nun bin ich mir über die "normale" standardmässige "Funktion"
des <p>-Elemenst nicht ganz im Klaren.

Bisher hatte ich es immer so verstanden, dass das <br>-Tag für
Zeilenumbruch innerhalb eines Fliesstextes zuständig ist.
Und das <p>-Element halt für einen Absatz.
Wobei der Absatz dann eben auch gleichzeitig eine Leerzeile "erzeugt".
Ist das denn nicht richtig so?

Ich habe deshalb bei mir diese dünn umrandeten grauen Kästen per
<div>-Element gemacht. Und innerhalb dieser wollte ich dann
sozusagen den Fließtext ganz normal benutzen (mit p usw.).

Ist es denn so, dass diser per <p>-Element erzeugte Absatz
oben und unten auch immer noch so einen Standardabsatnd hat?
Oder wie, oder was?

Würde mich riesig freuen, wenn Ihr mich da aufklären könntet :-)
Gruß
Ingo

[MudGuard]

Hi,

Nun bin ich mir über die "normale" standardmässige "Funktion"
des <p>-Elemenst nicht ganz im Klaren.

Es zeichnet den darin befindlichen Text als einen Absatz (englisch paragraph) aus.

Bisher hatte ich es immer so verstanden, dass das <br>-Tag für
Zeilenumbruch innerhalb eines Fliesstextes zuständig ist.
Und das <p>-Element halt für einen Absatz.
Wobei der Absatz dann eben auch gleichzeitig eine Leerzeile "erzeugt".

Nein, Absätze erzeugen keine Leerzeilen.
Für Absätze sind (so wie andere Elemente auch) ggf. Abstände (innere: padding und äußere: margin) im (browserinternen) Stylesheet festgelegt.

Ich habe deshalb bei mir diese dünn umrandeten grauen Kästen per
<div>-Element gemacht. Und innerhalb dieser wollte ich dann
sozusagen den Fließtext ganz normal benutzen (mit p usw.).

Ist es denn so, dass diser per <p>-Element erzeugte Absatz
oben und unten auch immer noch so einen Standardabsatnd hat?

Wenn es im browserinternen Stylesheet so festgelegt ist: ja.
Aber Du kannst ja in Deinem Stylesheet andere Abstände definieren, wenn Du Dich nicht darauf verlassen willst, daß alle Browser einen Dir angenehmen Abstand definiert haben.

cu,
Andreas

[Ingo Siemon]

Lieber Andreas

Wenn es im browserinternen Stylesheet so festgelegt ist: ja.

Naja, ich gehe erstmal von der standardmäßigen Einstellung der Browser aus,
nachdem man sie einfach "normal" installiert hat.

Aber Du kannst ja in Deinem Stylesheet andere Abstände definieren, wenn Du Dich nicht darauf verlassen willst, daß alle Browser einen Dir angenehmen Abstand definiert haben.

Bisher sieht bei mir der Quelltext einer solchen dünn umrandeten
grauen Box folgendermassen aus:

  
<div class="box">  
  <p>blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla.</p>  
  <p>blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla.</p>  
  <p>blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla.</p>  
</div>  

wobei dem <p>-Element in meiner CSS-Datei bisher keinerlei
Eigenschaft zugeordnet ist.

Hab ich Dich richtig verstanden, dass ich es eher so lösen sollte:

  
<div class="box">  
  <p>blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla.</p><br /><br />  
  <p>blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla.</p><br /><br />  
  <p>blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla.</p>  
</div>  

und per css dann p {margin: 0;}

Gruß
Ingo

[MudGuard]

Hi,

Aber Du kannst ja in Deinem Stylesheet andere Abstände definieren, wenn Du Dich nicht darauf verlassen willst, daß alle Browser einen Dir angenehmen Abstand definiert haben.

Hab ich Dich richtig verstanden, dass ich es eher so lösen sollte:

Lies den Satz von mir nochmal durch.
Liest Du darin irgendetwas von br-Elementen?

cu,
Andreas

[Ingo Siemon]

Lieber Andreas

Lies den Satz von mir nochmal durch.
Liest Du darin irgendetwas von br-Elementen?

Ne, eigentlich nicht wirklich ;-)
War ja auch nur so ne Idee?

OK, ich soll also, wenn ich einen bestimmten Abstand
zwischen den Absätzen haben möchte, per CSS dem
<p>-Element diese Abstände mit margin zuweisen, ja?

Und wenn in meinem Fall der erste und der letze Absatz
(in einer der grauen Boxen) bis zum Rand (ohne Abstand)
reichen sollen, muss ich diesen dann eben je eine Klasse
für "ersten Absatz" und "letzem Absatz" zurdnen, richtig?

Ich frage hier so genau nach, weil ich das alles nicht
so gern einfach nur irgendwie "hintricksen" will,
sondern es gern ganz korrekt im "Sinne des Erfinders"
(also des Standards) machen möchte.
Ich hoffe, ich nerve nicht.

Gruß
Ingo

[Der Martin]

Hallo,

Bisher sieht bei mir der Quelltext einer solchen dünn umrandeten grauen Box folgendermassen aus ...

Das ist doch völlig okay!

Hab ich Dich richtig verstanden, dass ich es eher so lösen sollte:

<div class="box">
  <p>blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla.</p><br /><br />
  <p>blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla.</p><br /><br />
  <p>blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla.</p>
</div>

> und per css dann `p {margin: 0;}`{:.language-css}  
  
NEIIIN!  
  
Wenn du \_innerhalb\_ eines Absatzes einen Zeilenumruch willst, nimm dort ein br zur Hand. Aber versuche bitte nicht, Abstände durch den Einsatz von br zu erzeugen. Dann doch lieber beispielsweise  

> `p {margin: 0.5em;}`{:.language-css}  
  
Ciao,  
 Martin  

-- 
[Programmierer (m), seltener auch ~in (w)](http://community.de.selfhtml.org/zitatesammlung/index.php?zitatID=374):  
Irdische, i.a. humanoide Lebensform, die in einem komplizierten biochemischen Prozess Kaffee, Cola und Pizza in maschinenlesbaren Programmcode umwandelt.  
P~ bilden gelegentlich mit ihresgleichen kleine Gruppen, sogenannte Communities, sind aber ansonsten meist scheue Einzelgänger.  
P~ sind vorwiegend nachtaktiv und ohne technische Hilfsmittel nur eingeschränkt lebensfähig.

[Ingo Siemon]

Lieber Martin

NEIIIN!

Wenn du _innerhalb_ eines Absatzes einen Zeilenumruch willst, nimm dort ein br zur Hand. Aber versuche bitte nicht, Abstände durch den Einsatz von br zu erzeugen.

OK, hätte mich auch gewundert.
Dann nutzt man ja doch wieder html zu Layouzwecken anstatt CSS.

Dann doch lieber beispielsweise

p {margin: 0.5em;}

Dann habe ich aber doch wieder das Problem, dass er oberste
und der unterste Absatz in einer solchen grauen Box
auch wieder einen Abstand zum Rand hat.

Ich möchte es aber gern so haben, dass der Text direkt unter dem
obersten Rand anfängt und am untersten Rand aufhört.
(Mal abgesehen von meinem padding der grauen Boxen)

Mus ich dafür extra noch eine Klasse für "ersten Absatz"
und "letzen Absatz" auf das <p>-Element anwenden?

Gruß
Ingo

[MudGuard]

Hi,

Dann doch lieber beispielsweise

p {margin: 0.5em;}
Dann habe ich aber doch wieder das Problem, dass er oberste
und der unterste Absatz in einer solchen grauen Box
auch wieder einen Abstand zum Rand hat.
Mus ich dafür extra noch eine Klasse für "ersten Absatz"
und "letzen Absatz" auf das <p>-Element anwenden?

:first-child existiert seit CSS 2.0.

(ok, der IE ist zu blöd dafür, aber da kann CSS ja nichts dafür)

:last-child gibt es erst seit CSS 3.0, wird daher noch nicht ganz so gut unterstützt wie :first-child.

cu,
Andreas

[Ingo Siemon]

Lieber Andreas

Mus ich dafür extra noch eine Klasse für "ersten Absatz"
und "letzen Absatz" auf das <p>-Element anwenden?

:first-child existiert seit CSS 2.0.
(ok, der IE ist zu blöd dafür, aber da kann CSS ja nichts dafür)
:last-child gibt es erst seit CSS 3.0, wird daher noch nicht ganz so gut unterstützt wie :first-child.

Wäre denn dann mein obiger Vorschlag eine vertretbare
legitime ALternative?

Gruß
Ingo

[Gunnar Bittersmann]

Hello out there!

Mus ich dafür extra noch eine Klasse für "ersten Absatz"
und "letzen Absatz" auf das <p>-Element anwenden?

Wäre denn dann mein obiger Vorschlag eine vertretbare
legitime ALternative?

Eine unnötige. „Im Internet-Explorer sieht es so aus, wie ich es gern hätte.“ [OP] Also muss der IE auf diese Selektoren mit :first-child und :last-child in deinem Falle gar nicht reagieren.

Aber wozu die Sonderbehandlung des ersten und letzten Absatzes? Wir können auch anders.

See ya up the road,
Gunnar

[Ingo Siemon]

Lieber Gunnar

Eine unnötige. „Im Internet-Explorer sieht es so aus, wie ich es gern hätte.“ [OP] Also muss der IE auf diese Selektoren mit :first-child und :last-child in deinem Falle gar nicht reagieren.

OK, das stimmt natürlich.
Ich werds mal probieren damit.

Aber wozu die Sonderbehandlung des ersten und letzten Absatzes? Wir können auch anders.

Antwort siehe hier

Gruß
Ingo

[Ingo Siemon]

Lieber Gunnar

Eine unnötige. „Im Internet-Explorer sieht es so aus, wie ich es gern hätte.“ [OP] Also muss der IE auf diese Selektoren mit :first-child und :last-child in deinem Falle gar nicht reagieren.

Ich habs nun mal so probiert (noch nicht online):

div#Inhalt p {  
  margin: 1em 0 0 0;  
}  
div#Inhalt p:first-child {  
  margin: 0;  
}

Dann ist im FireFfox und Opera alles prima.
Aber nun macht natürlich der IE oben zwischen dem Rand der div.box
und dem ersten Absatz ja auch diesen Abstand von 1em, weil
der IE ja das first-child ignoriert.

Gruß
Ingo

[Gunnar Bittersmann]

Hello out there!

Ich habs nun mal so probiert (noch nicht online):
div#Inhalt p {
  margin: 1em 0 0 0;
}
div#Inhalt p:first-child {
  margin: 0;
}

Dann ist im FireFfox und Opera alles prima.
Aber nun macht natürlich der IE oben zwischen dem Rand der div.box
und dem ersten Absatz ja auch diesen Abstand von 1em,

Tut er das? Mein IE 5.0 macht das nicht.

Brauchst du die margin-Angabe für p überhaupt?

Warum nicht einfach

div#Inhalt p:first-child {  
 margin-top: 0;  
}  
  
div#Inhalt p:last-child {  
 margin-bottom: 0;  
}

Sieht bei mir gut aus. Was sagt der IE 6.0?

See ya up the road,
Gunnar

[Ingo Siemon]

Lieber Gunnar

Warum nicht einfach

div#Inhalt p:first-child {

margin-top: 0;
}

div#Inhalt p:last-child {
margin-bottom: 0;
}

  
Alter, ich könnt Dir küssen :)  
Funktioniert super und ich bin da sogar wieder richtig schon standardkonform.  
Der Opera ignoriert den last-child,  
darum habe ich noch diesen hier dazugepackt:  
~~~css
div#Inhalt p {  
 margin-bottom: 0;  
}

Gruß
Ingo

[Gunnar Bittersmann]

Hello out there!

Alter, ich könnt Dir küssen :)

SELFHTML-Treffen? ;-)

See ya up the road,
Gunnar

[Ingo Siemon]

Lieber Gunnar

SELFHTML-Treffen? ;-)

Wann, wo ?

Gruß
Ingo

[Der Martin]

Hallo Ingo,

SELFHTML-Treffen? ;-)
Wann, wo ?

Wahrscheinlich wieder irgendwann im Spätsommer wie letztes Jahr. AFAIK in Erlangen.
Wird aber bestimmt noch rechtzeitig hier bekanntgegeben... :-)

So long,
 Martin

[Gunnar Bittersmann]

Hello out there!

Mus ich dafür extra noch eine Klasse für "ersten Absatz"
und "letzen Absatz" auf das <p>-Element anwenden?

Nein, dafür gibt es die Pseudoklassen http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#first_line_letter_child@title=:first-child (CSS 2) und :last-child (erst in CSS 3, wird aber von Browsern[tm] schon umgesetzt).

(Mal abgesehen von meinem padding der grauen Boxen)

Aber warum haben die div.box denn oben und unten Innenabstand? Wenn du den nicht willst, setze den auf 0 und lass die p ihren Außenabstand haben.

See ya up the road,
Gunnar

[Ingo Siemon]

Lieber Gunnar

Nein, dafür gibt es die Pseudoklassen http://de.selfhtml.org/css/eigenschaften/pseudoformate.htm#first_line_letter_child@title=:first-child (CSS 2) und :last-child (erst in CSS 3, wird aber von Browsern[tm] schon umgesetzt).

OK, ich werde das mal ausprobieren.
Wäre denn mein anderer Vorschlag eine vertretbare legitime Alternative?
Ich meine dafür, dass es auch mit aktuellen und älteren Browsern geht.

Aber warum haben die div.box denn oben und unten Innenabstand? Wenn du den nicht willst, setze den auf 0 und lass die p ihren Außenabstand haben.

Die div.box hat rundherum einen 4pixel-padding, damit der
Inhalt nicht direkt an der Umrandung "klebt".
Und die Abstände zwischen den Absätzen (<p>) sollen 1em grß sein.

Gruß
Ingo

[Gunnar Bittersmann]

Hello out there!

Die div.box hat rundherum einen 4pixel-padding, damit der
Inhalt nicht direkt an der Umrandung "klebt".

Du kennst auch <http://de.selfhtml.org/css/eigenschaften/innenabstand.htm@title=padding-top, padding-right, padding-bottom, padding-left>?

Oder auch [code lang=css].box {padding: 0 4px}[code]

See ya up the road,
Gunnar

[Ingo Siemon]

Lieber Gunnar

Du kennst auch <http://de.selfhtml.org/css/eigenschaften/innenabstand.htm@title=padding-top, padding-right, padding-bottom, padding-left>?

Oder auch .box {padding: 0 4px}

Doch doch, das kenne ich natürlich.
Wenn ich aber der div.box nun oben und unten einen Innenabstand
von 0 zuordne, und dann dem <p> einen margin-top von 1em,
habe ich ja oben wieder einen viel zu großen Abstand.

Der Abstand zwischen den einzelnen Absätzen soll ein andere sein,
als der Abstand vom ersten und letzem Absatz zum Rand.
Somit bleibt mir doch nichts anderes übrig,
als eine "Sonderbehandlung" des ersten und letzen Absatzes.

Oder bin ich jatzt irgendwie zu blöd :)
Gruß
Ingo

[Gunnar Bittersmann]

Hello out there!

Der Abstand zwischen den einzelnen Absätzen soll ein andere sein,
als der Abstand vom ersten und letzem Absatz zum Rand.

Wobei zu überlegen wäre, ob die Angabe in Pixel sinnvoll ist oder ob sich der Abstand nicht auch an der Schriftgröße orientieren sollte, also in em angegeben werden sollte.

Somit bleibt mir doch nichts anderes übrig,
als eine "Sonderbehandlung" des ersten und letzen Absatzes.

Doch. Wie wär’s denn nicht mit Außenabstand für die Absätze, sondern mit Innenabstand? Diese fallen nicht zusammen.

Sowas in der Art:

.box {  
  padding: 0 0.5em;  
}  
  
.box p {  
  margin: 0;  
  padding: 0.5em;  
}

Oder bin ich jatzt irgendwie zu blöd :)

Ähm ... – nö. ;-)

See ya up the road,
Gunnar

[Ingo Siemon]

Lieber Gunnar

Sowas in der Art:

.box {

padding: 0 0.5em;
}

.box p {
  margin: 0;
  padding: 0.5em;
}

  
Das geht leider auch nicht,  
weil die Boxen eine feste Breite haben und weil  
ich eben doch gern einen inneren Abstand der Boxen  
von 4 pixeln haben möchte, unabhängig vom Abstand der Absätze.  
  
Ich habs nun einfach so gemacht:  
~~~css
div#Inhalt p {  
  margin: 0.6em 0 0 0;  
}  
div#Inhalt p.absatzerster {  
  margin: 0;  
}

Und der erste Absatz bekommt hallt einfach die Klasse
"absatzerster", weil der IE ja hier das sonst
anzuwendende first-child ignoriert.

Ist doch vielleicht ein ganz guter Kompromiss, oder?
Gruß
Ingo

[Der Martin]

Hallo Ingo,

Bisher hatte ich es immer so verstanden, dass das <br>-Tag für
Zeilenumbruch innerhalb eines Fliesstextes zuständig ist.
Und das <p>-Element halt für einen Absatz.
Wobei der Absatz dann eben auch gleichzeitig eine Leerzeile "erzeugt".
Ist das denn nicht richtig so?

Praktisch ja, theoretisch nicht ganz, weil unglücklich formuliert.

Das br-Element erzeugt einfach einen Zeilenumbruch im Fließtext, soweit korrekt. Es bewirkt, dass der Text in einer neuen Zeile weiterläuft, hat aber keinen Einfluss auf die Gliederung durch das p-Element.

Das p-Element umschließt einen Absatz und macht ihn zu einem zusammenhängenden Block. Es erzeugt aber keine Leerzeile, sondern lediglich einen nicht genau festgelegten Abstand nach oben und/oder unten, der durch das Default-Stylesheet des Browsers vorgegeben ist. Ob diese Abstände oben oder unten, durch margin oder padding realisiert werden, kann von Browser zu Browser unterschiedlich sein; wenn du für dein Layout einheitliche Formatierungen brauchst, solltest du sie in deinem Stylesheet selbst definieren.

Ich habe deshalb bei mir diese dünn umrandeten grauen Kästen per
<div>-Element gemacht. Und innerhalb dieser wollte ich dann
sozusagen den Fließtext ganz normal benutzen (mit p usw.).

Das ist IMHO genau richtig. Wenn du mehrere Absätze zu einer Einheit gruppieren willst, ist das div-Element genau die richtige Wahl.

Würde mich riesig freuen, wenn Ihr mich da aufklären könntet :-)

Hat das jetzt geholfen? ;-)

Schönes Wochenende noch,
 Martin

[Ingo Siemon]

Lieber Martin

Hat das jetzt geholfen? ;-)

Ja, hat es, sogar sehr. Vielen lieben Dank!

Dann müsste doch mein Vorschlag in diesem Posting
eigentlich die richtige Lösung sein, oder?

Gruß
Ingo