Valentin Wirth: Abständ zwischen Überschrift und Absatz

Wenn ich eine Überschrift z.B. <h1>Hallo Ihr</h1> schreibe und danach einen Absatz Text hier z.B. <p>BlaBla oder auch anderes</p> setze erhalte ich einen gehörigen Abstand zwischen beiden. Ist ja auch klar.

Nun manchen finden denn vielleicht super, ich brauch den Abstand gerade aber mal gar nicht. Also habe ich als erstes versucht mit CSS beiden Elementen Ihren Abstand (margin:0px) ganz runter zu setzen. Kein Erfolg.

Na gut sind ja auch beides Block Elemente. Also könnte ich ja einfach den Teil den ich als Überschrift haben will mit in den Absatz rein nehmen, mit CSS formatieren und danach einen Zeilenumbruch machen.
<p><span class="Header">Hallo Ihr<br>Bla..</p>

Das Gefällt mir aber auch nicht (ja, ich bin heute mal pigelig). Nun wurde <h1> und <p> ja nicht dazu erfunden um meinen Text hübsch zu machen sondern zur logischen Auszeichnung von Überschrift und Absatz. Da ich das gut so finde und ordentlichen Quelltext schreiben will frage ich mich ob es da nicht noch einen Weg gibt.

Also meine Frage(n): Kann man ein Block Element in ein Inline Element umwandeln? Hätte das irgendwelche andere Konsequenzen als einen fehlenden Zeilenumbruch? Gibt es vielleicht einen andern Weg um den Abstand zwischen <h1> und <p> zu minimieren?

Danke euch für eventuelle Antworten und
habt noch viel Spaß,

Valentin

  1. hi

    Also meine Frage(n): Kann man ein Block Element in ein Inline Element umwandeln? Hätte das irgendwelche andere Konsequenzen als einen fehlenden Zeilenumbruch? Gibt es vielleicht einen andern Weg um den Abstand zwischen <h1> und <p> zu minimieren?

    ich glaube display:inline heißt das gesuchte *kopfkratz*
    schau dir einfach mal die css-schenllübersicht in selfhtml an, da steht alles dazu (und ist auch nciht allzu lang :))

    so long
    ole
    (8-)>

  2. Tach

    Also meine Frage(n): Kann man ein Block Element in ein Inline Element umwandeln? Hätte das irgendwelche andere Konsequenzen als einen fehlenden Zeilenumbruch?

    Ja, mit display:inline, finde ich aber an dieser Stelle eher sinnlos.

    Gibt es vielleicht einen andern Weg um den Abstand zwischen <h1> und <p> zu minimieren?

    Nun ja, margin:0 in _beiden_ Tags sollte den Abstand schon deutlich reduzieren. Falls das immer noch nicht reicht, tut's ein zusätzliches line-height:100%.

    Thomas J.

    1. Danke schön,

      genau nach sowas wie  style="display:inline" hatte ich gesucht (hatte das doch irgendwo gelesen). Warum sagst du denn das das hier evt. nicht ganz angebracht ist.

      Gibt es irgendwelche Nachteile dabei, ein Element in ein Inline Element abzuändern?

      1. Hallihallo!

        Gibt es irgendwelche Nachteile dabei, ein Element in ein Inline Element abzuändern?

        Der entscheidende Nachteil ist sicherlich, daß der Zeilenumbruch flöten ist.
        Aber wenn Dich das nicht stört... :)

        Viele liebe Grüße,
        Der Dicki

  3. Hallihallo!

    Nun manchen finden denn vielleicht super, ich brauch den Abstand gerade aber mal gar nicht. Also habe ich als erstes versucht mit CSS beiden Elementen Ihren Abstand (margin:0px) ganz runter zu setzen. Kein Erfolg.

    Ich weiß ja nicht, wie Du das genau versucht hast, aber hiermit hat man fast gar keinen Abstand zwischen den beiden:
    <html>
     <head>
      <title>test</title>
      <style type="text/css">
      h1 {
       margin-bottom: 0px;
      }
      p {
       margin-top: 0px;
      }
      </style>
     </head>
     <body>
      <h1>Test</h1>
      <p>
       Ich hoffe, jetzt ist der Abstand zwischen Ueberschrift und Text wech....
      </p>
     </body>
    </html>

    Ich hoffe, das war es, was Du suchst.....

    Viele liebe Grüße,
    Der Dicki

  4. hi

    welchen margin hast du verändert? <p> hat ca. 10px oben und die <h*> ungefähr das gleiche nach unten. Netscape 4 kriegt das mit den Abständen nicht auf die Reihe, falls du es damit versucht hast.

    Grüße aus Bleckede

    Kai