Torsten: Inline- und Blockelemente

Hi,

ich hab bis jetzt noch nicht so recht den Unterschied zwischen Inline- und Blockelementen verstanden. Würde mich freuen wenn mir jemand dies verständlich erläutern könnte. Vielleicht versteh auch ich dann den Unterschied.

Sind Blockelemente alle Elemente die mit einem Anfangs-Tag und einem End-Tag notiert sind, z.B. <div></div>? Und Inline wäre dann z.B. <img [...] >?

Torsten

  1. Hi,

    Sind Blockelemente alle Elemente die mit einem Anfangs-Tag und einem End-Tag notiert sind, z.B. <div></div>? Und Inline wäre dann z.B. <img [...] >?

    Stimmt zwar oft, aber nicht immer. <span> z.B. erzeugt ein inline-Element.

    Vereinfacht gesagt, fangen Blockelemente eine neue Zeile an, Inlineelemente nicht.

    Shepard

    1. hallo,

      Stimmt zwar oft, aber nicht immer. <span> z.B. erzeugt ein inline-Element.

      <span> ist ein inline-Element, aber es "erzeugt" gar nichts.

      Vereinfacht gesagt, fangen Blockelemente eine neue Zeile an, Inlineelemente nicht.

      Blockelemente bilden einen eigenen Absatz. Siehe auch http://de.selfhtml.org/html/referenz/elemente.htm

      Grüße aus Berlin

      Christoph S.

      --
      Visitenkarte
      ss:| zu:) ls:& fo:) va:) sh:| rl:|
      1. Hallo Christoph,

        ok, wenn Du unbedingt klugscheissen willst:

        Stimmt zwar oft, aber nicht immer. <span> z.B. erzeugt ein inline-Element.
        <span> ist ein inline-Element, aber es "erzeugt" gar nichts.

        Das ist kein Element, schon gar nicht inline. Das ist das Start-Tag eines Inline-Elementes.

        Wird in Span-Element in einem wohlgeformten und möglichst auch validen Dokument erfolgreich geparst, erzeugt es im CSS-Kontext eine Box (nach Browsereinstellung meistens inline dargestellt), im DOM-Kontext erzeugt es ein Objekt, das das Interface HTMLElement implementiert.

        Manchmal glaube ich, man sollte Dich genauso korinthenkackerisch behandeln, wie Du Neulinge hier behandelst. Ich fange hiermit mal damit an.

        Tim

        1. Hallo Tim,

          ich melde ich hier nur, weil es meine Antwort war, die Christoph verbessert hat.

          Manchmal glaube ich, man sollte Dich genauso korinthenkackerisch behandeln, wie Du Neulinge hier behandelst.

          Was ich ihm nicht wirklich übel nehme, da er in der Sache Recht hat. Über Tonfall kann man streiten, aber er hat definitiv nur meine Aussage korrigiert, nicht mich persönlich irgendwie angegriffen.

          Also, von meiner Seite kein Problem.

          So long
          Shepard

          1. Hallo,

            Was ich ihm nicht wirklich übel nehme, da er in der Sache Recht hat. Über Tonfall kann man streiten, aber er hat definitiv nur meine Aussage korrigiert, nicht mich persönlich irgendwie angegriffen.

            Ja, mich stört auch weniger die Sache, sondern die über lange Zeit gehende Penetranz in solch Korinthenkackerei, wie. z.b. auch hier. Manchmal muss man dann mal explodieren.

            Tim

    2. Hello out there!

      Sind Blockelemente alle Elemente die mit einem Anfangs-Tag und einem End-Tag notiert sind, z.B. <div></div>? Und Inline wäre dann z.B. <img [...] >?

      Stimmt zwar oft,

      ?? a, acronym, abbr, b, cite, code, em, i, kbd, q, sub, sup, strong, ...

      See ya up the road,
      Gunnar

      --
      “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
  2. ich hab bis jetzt noch nicht so recht den Unterschied zwischen Inline- und Blockelementen verstanden. Würde mich freuen wenn mir jemand dies verständlich erläutern könnte. Vielleicht versteh auch ich dann den Unterschied.

    OK ;)

    Sind Blockelemente alle Elemente die mit einem Anfangs-Tag und einem End-Tag notiert sind, z.B. <div></div>? Und Inline wäre dann z.B. <img [...] >?

    Nein. Blockelemente sind Elemente, die einen Zeilenumbruch erzeugen, abso beispielsweise div, p, h1, ul, li, form
    Blockelemente haben gewöhnlich im CSS von Haus aus display:block

    Inline-Elemente sind Elemente, die sich innerhalb eines Textes befinden und nicht zwandsläufig einen neue Zeile verursachen, z.B. a, b, strong, em, img, font, code, abbr
    Inlineelemente haben gewöhnlich im CSS von Haus aus display:inline

    Blockelemente dehnen sich auch auf die verfügbare Breite aus und können Inline- und Blockelemente enthalten, sie sind so etwas wie rechteckige Behälter für Text und weitere Elemente. Inline-Elemente sind nur so breit wie nötig, nur dadurch, dass du einen Text über <i> kursiv machst, entsteht kein zusätzlicher Zeilenumbruch oder Abstand. Außerdem können inline-Elemente eben keine Blockelemente enthalten.

    1. Hi Jonathan,

      vielen Dank für deine ausführliche und verständliche Erklärung.
      Jetzt hab auch ich es verstanden :)

      Grüße
      Torsten

    2. hallo,

      Blockelemente sind Elemente, die einen Zeilenumbruch erzeugen

      Das tun sie nicht. Aber sie stehen in einem eigenen Absatz.

      Blockelemente haben gewöhnlich im CSS von Haus aus display:block

      Blockelemente sind HTML-Elemente und lassen sich mit allem, was CSS bereitstellt, formatieren. Sie lassen sich ebensogut mit "display:inline" behandeln wie andere Elemente auch. Siehe display

      Inline-Elemente sind Elemente, die sich innerhalb eines Textes befinden und nicht zwandsläufig einen neue Zeile verursachen

      "Inline-Elemente erzeugen keinen eigenen Absatz im Textfluss. Inline-Elemente sind als untergeordnete, "innere" Elemente für Block-Elemente gedacht" steht in SELFHTML.

      Inlineelemente haben gewöhnlich im CSS von Haus aus display:inline

      "display" kann jedem beliebigen HTML-Element zugeordnet werden.

      Blockelemente [...] sind so etwas wie rechteckige Behälter für Text und weitere Elemente.

      Blockelemente sind keine Behälter.

      Außerdem können inline-Elemente eben keine Blockelemente enthalten.

      Das ist richtig.

      Grüße aus Berlin

      Christoph S.

      --
      Visitenkarte
      ss:| zu:) ls:& fo:) va:) sh:| rl:|
      1. Moin,

        Blockelemente sind Elemente, die einen Zeilenumbruch erzeugen

        Das tun sie nicht. Aber sie stehen in einem eigenen Absatz.

        Könnte wir uns beim gemeinsamen Korinthenkacken auf ein "weder noch" einigen und folgend Satz nehmen: Generally, block-level elements begin on new lines oder Im Allgemeinen beginnen Block-Elemente in einer neuen Zeile?  ;-)

        Swen

        1. Könnte wir uns beim gemeinsamen Korinthenkacken auf ein "weder noch" einigen und folgend Satz nehmen:

          korinthenkacken, dieses wort hab ich gesucht! ;)

          Torsten

        2. hallo Swen,

          Könnte wir uns beim gemeinsamen Korinthenkacken auf ein "weder noch" einigen

          In diesem Fall nicht. "Zeilenumbruch" ist in HTML <br>. Blockelemente erzeugen nun aber keineswegs immer ein zusätzliches <br>.

          und folgend Satz nehmen: Generally, block-level elements begin on new lines oder Im Allgemeinen beginnen Block-Elemente in einer neuen Zeile?  ;-)

          Gegen den Satz ist nichts einzuwenden.

          Grüße aus Berlin

          Christoph S.

          --
          Visitenkarte
          ss:| zu:) ls:& fo:) va:) sh:| rl:|
          1. Hallo Christoph,

            Könnte wir uns beim gemeinsamen Korinthenkacken auf ein "weder noch" einigen

            In diesem Fall nicht. "Zeilenumbruch" ist in HTML <br>. Blockelemente erzeugen nun aber keineswegs immer ein zusätzliches <br>.

            ich denke in diesem Fall war die Rede von einem gedanklichem Zeilenumbruch und nicht von einem "HTML Break".

            Und wenn ich dazu auch ein wenig Korinthenkacken darf:
            Blockelemente erzwingen "komischerweise" Zeilenumbrüche:

            http://de.selfhtml.org/html/text/zeilenumbruch.htm#erzwingen

            Torsten

            1. hallo,

              Und wenn ich dazu auch ein wenig Korinthenkacken darf:
              Blockelemente erzwingen "komischerweise" Zeilenumbrüche:
              http://de.selfhtml.org/html/text/zeilenumbruch.htm#erzwingen

              Es geht an der angegebenen Stelle _nicht_ allgemein um Blockelemente, sondern speziell um die Eläuterung des HTML-Elements <br>.

              Grüße aus Berlin

              Christoph S.

              --
              Visitenkarte
              ss:| zu:) ls:& fo:) va:) sh:| rl:|
              1. hallo,

                Und wenn ich dazu auch ein wenig Korinthenkacken darf:
                Blockelemente erzwingen "komischerweise" Zeilenumbrüche:
                http://de.selfhtml.org/html/text/zeilenumbruch.htm#erzwingen

                Es geht an der angegebenen Stelle _nicht_ allgemein um Blockelemente, sondern speziell um die Eläuterung des HTML-Elements <br>.

                ich will mich ja nicht streiten aber...

                Jonathan:

                Blockelemente sind Elemente, die einen Zeilenumbruch erzeugen

                Christoph Schnauß:

                Das tun sie nicht.

                Torsten:

                http://de.selfhtml.org/html/text/zeilenumbruch.htm#erzwingen

                vielleicht stört dich auch nur das wörtchen "erzeugen"!?
                welches Jonathan bestimmt mit erzwingen verwechselt hat!?

                Torsten

      2. naja, es muss halt immer noch jemanden geben der seinen senf überheblicherweise dazu geben muss ;) aber letztendlich hab ich jonathan verstanden und kenne nun die "praxisorientierten" unterschiede, was letztendlich für mich als "praktischer" entwickler ausreichend ist :)

        Torsten

      3. Hallo,

        Blockelemente sind Elemente, die einen Zeilenumbruch erzeugen

        Das tun sie nicht. Aber sie stehen in einem eigenen Absatz.

        Wurde bereits diskutiert. Ich halte es für gleichwertig zu sagen, dass eine neue Zeile erzwungen wird, erzeugt wird, oder dass der Text in einer neuen Zeile beginnt. Ich denke, es ich klar, dass wenn ich ein <div> schreibe, dass dann kein zusätzliches <br> irgendwo generiert wird.

        Blockelemente haben gewöhnlich im CSS von Haus aus display:block

        Blockelemente sind HTML-Elemente und lassen sich mit allem, was CSS bereitstellt, formatieren. Sie lassen sich ebensogut mit "display:inline" behandeln wie andere Elemente auch. Siehe display

        Ich habe nichts anderes gesagt. Natürlich lässt sich die display-Eigenschaft ändern. Ich schrieb ja auch "gewöhnlich" und "von Haus aus" (bedeutet: Voreinstellung vom Browser, lässt sich mit CSS überschreiben).

        "display" kann jedem beliebigen HTML-Element zugeordnet werden.

        Ich habe nichts anderes behauptet. Außerdem gibt es eben noch die unterscheidung zwischen CSS-Blockelementen und HTML-Blockelementen, auf die ich der Verständlichkeit halber nicht näher eingegangen bin.

        Blockelemente sind keine Behälter.

        Aber Blockelemente können doch andere Elemente enthalten!? ;)

        MfG Jonathan.

        1. hallo,

          Aber Blockelemente können doch andere Elemente enthalten!? ;)

          Generell können sie inline-Elemente enthalten. Einige können auch weitere Blockelemente umschließen.

          Grüße aus Berlin

          Christoph S.

          --
          Visitenkarte
          ss:| zu:) ls:& fo:) va:) sh:| rl:|
          1. Hello out there!

            Generell können [Blockelemente] inline-Elemente enthalten.

            Nein. 'hr' bspw. kann das nicht.

            See ya up the road,
            Gunnar

            --
            “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
  3. Hello out there!

    ich hab bis jetzt noch nicht so recht den Unterschied zwischen Inline- und Blockelementen verstanden.

    Da gilt es zu unterscheiden zwischen HTML und CSS.

    In HTML sind Blockelemente solche, die auch weitere Blockelemente enthalten dürfen; Inline-Elemente hingegen dürfen keine Blockelemente enthalten.

    Zu CSS-Block- und Inline-Elementen siehe [CSS2 §9.2]

    Zu den Zusammenhängen siehe http://forum.de.selfhtml.org/archiv/2006/6/t132132/#m854853 und https://forum.selfhtml.org/?t=135911&m=882972.

    See ya up the road,
    Gunnar

    --
    “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
    1. Hallo Gunnar,

      In HTML sind Blockelemente solche, die auch weitere Blockelemente enthalten dürfen

      *hüstel* Zum Beispiel p, hx, ...? ;-)

      Viele Grüße
      Carsten

      1. Hi,

        In HTML sind Blockelemente solche, die auch weitere Blockelemente enthalten dürfen

        *hüstel* Zum Beispiel p, hx, ...? ;-)

        also langsam hab ich das gefühl ich bin hier beim gluckscheissertreff gelandet. jeder will es besser als der andere wissen. ich würde mich freuen wenn Carsten seine aussage etwas genauer erläutern könnte. ich kann über insider statements leider nicht mit schmunzeln...

        Torsten

        1. Hallo Torsten.

          In HTML sind Blockelemente solche, die auch weitere Blockelemente enthalten dürfen

          *hüstel* Zum Beispiel p, hx, ...? ;-)

          also langsam hab ich das gefühl ich bin hier beim gluckscheissertreff gelandet. jeder will es besser als der andere wissen. ich würde mich freuen wenn Carsten seine aussage etwas genauer erläutern könnte. ich kann über insider statements leider nicht mit schmunzeln...

          Carsten wollte zum Ausdruck bringen, dass man Blockelemente nicht zwangsläufig daran erkennen kann, dass sie weitere Blockelemente enthalten dürfen. Bei Absätzen und Überschriften ist dies zum Beispiel nicht der Fall.

          Zur Unterscheidung muss man sich wohl oder übel auf den optischen Aspekt beschränken, welcher hier ja schon genannt wurde.

          Einen schönen Mittwoch noch.

          Gruß, Mathias

          --
          sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
          „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
          [HTML Design Constraints: Logical Markup]
          1. Hello out there!

            *hüstel* Zum Beispiel p, hx, ...? ;-)

            @CarstenP: Ludgers Hüsteln hat aber eine lange Inkubationszeit. SCNR.

            Natürlich hast du recht.

            also langsam hab ich das gefühl ich bin hier beim gluckscheissertreff gelandet.

            @Torsten: Das Gefühl trügt nicht. SCNR.

            ich kann über insider statements leider nicht mit schmunzeln...

            Wenn das nicht Ansporn ist, selbst „gluck“ und damit zum Insider zu werden ...

            Zur Unterscheidung muss man sich wohl oder übel auf den optischen Aspekt beschränken, welcher hier ja schon genannt wurde.

            @Mathias: Anhand des optischen Effekts unterscheidet man aber eher CSS-Blockelemente von CSS-Inline-Elementen denn HTML-Blockelemente von HTML-Inline-Elementen.

            See ya up the road,
            Gunnar

            --
            “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)
        2. Hell-O!

          In HTML sind Blockelemente solche, die auch weitere Blockelemente enthalten dürfen
          *hüstel* Zum Beispiel p, hx, ...? ;-)
          also langsam hab ich das gefühl ich bin hier beim gluckscheissertreff gelandet.

          Ist ja zum Glucksen.

          ich würde mich freuen wenn Carsten seine aussage etwas genauer erläutern könnte.

          Es gibt Blocklevelelemente, die weitere enthalten dürfen, es gibt aber auch Blocklevelelemente, die keine weiteren enthalten dürfen. Es gibt also eine Art Hierarchie bei diesen Elementen, die für einen Laien nicht so ohne weiteres zu überblicken ist, letztlich kommt dem Inhalt des Elementes entscheidende Bedeutung zu:

          Ein DIV dient der Gruppierung von Elementen jeder Art, also muss es auch erlaubt sein, dass innerhalb des DIV andere Blockelemente (z.B. Überschriften, Listen oder Textabsätze) vorkommen.

          Eine Überschrift enthält nur Text, der einen Teil des Inhaltes zusammenfasst. Innerhalb einer Überschrift kann es nach gesundem Menschenverstand weder Listen noch Textabsätze geben, weshalb sie auch in HTML an dieser Stelle nicht erlaubt sind. Lediglich Inline-Elemente zur Strukturierung der Überschrift sind erlaubt (z.B. um ein Schlagwort zu betonen oder um Code als solchen auszuzeichnen).

          Ähnlich verhält es sich mit Tabellen, Formularen etc. Dafür, welche Regeln genau für welches HTML-Element gelten, wirst du mit der Zeit ein Gefühl entwickeln, das du dir nur noch über den HTML-Validator deines Vertrauens bestätigen lassen musst.

          ich kann über insider statements leider nicht mit schmunzeln...

          Das war kein Insider, sondern eine berechtigte Richtigstellung bzw. Ergänzung.

          Siechfred

          --
          Ich bin strenggenommen auch nur interessierter Laie. (molily)
          Kabelkuddelmuddel || Steuerfreie Geburtsbeihilfen?  || RT 221 Erfurt-Altstadt i.V.
        3. Hallo Torsten,

          da ich nach Lektüre der übrigen Postings den Eindruck hatte, daß Du fürs erste hinreichend aufgeklärt wurdest, hielt ich es nicht für nötig, noch Großartiges hinzuzufügen, das entweder im Thread oder in den verlinkten Seiten sowieso schon erwähnt wurde. Ich wollte lediglich Gunnar mit einem Augenzwinkern darauf hinweisen, daß seine Aussage so nicht ganz richtig ist.

          Und eines kann ich Dir versichern: Wenn ich anfange gluckzuscheissern, dann liest sich das anders ... ;-)

          ich würde mich freuen wenn Carsten seine aussage etwas genauer erläutern könnte.

          Das haben die anderen ja mittlerweile freundlicherweise übernommen.

          Viele Grüße
          Carsten

          1. Hallo Carsten,

            Wenn ich anfange gluckzuscheissern, dann liest sich das anders ... ;-)

            Das Gluckscheißen beginnt mit dem Zieleinlauf.

            Grüße
             Roland

            1. hm,

              Das Gluckscheißen beginnt mit dem Zieleinlauf.

              Ich dachte, es wäre eine Wurfsportart, sowas wie Hammerwerfen oder so ...

              Grüße aus Berlin

              Christoph S.

              --
              Visitenkarte
              ss:| zu:) ls:& fo:) va:) sh:| rl:|
              1. Hallo Christoph,

                Das Gluckscheißen beginnt mit dem Zieleinlauf.
                Ich dachte, es wäre eine Wurfsportart, sowas wie Hammerwerfen oder so ...

                nein, hier war nicht das Sch_m_eißen gemeint!

                *scnr*
                 Martin

                --
                Wenn alle das täten, wass sie mich können,
                käme ich gar nicht mehr zum Sitzen.
                1. hallo Martin,

                  nein, hier war nicht das Sch_m_eißen gemeint!

                  Achso. Hm. Schade. Ich habe schon einen Statutenentwurf für ein Komitee geschrieben, das Hühnerweitwurf zur olympischen Sportart macen will.

                  Grüße aus Berlin

                  Christoph S.

                  --
                  Visitenkarte
                  ss:| zu:) ls:& fo:) va:) sh:| rl:|
                  1. Hello out there!

                    Ich habe schon einen Statutenentwurf für ein Komitee geschrieben, das Hühnerweitwurf zur olympischen Sportart macen will.

                    Die armen Viecher. Hühner sind zwar die so ziemlich hässlichsten Vögel, aber dafür auch die praktischsten: Deren Eier passen genau in den Eierbecher.

                    Dann doch lieber Flugratten werfen. http://forum.de.selfhtml.org/archiv/2003/6/t48964/#m267339

                    See ya up the road,
                    Gunnar

                    --
                    “Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen)