CSS-Unterschiede bei Block- und Inline-Elementen

Fügt man auf eine Website ein Block-Element hinzu, dann nimmt das Element standardmäßig die Breite des verfügbaren Bereichs ein und die Höhe richtet sich nach dem Inhalt. Der verfügbare Bereich ist entweder die Breite des Browserfensters oder die Breite des umschließenden Elements, wenn das Block-Element in ein anderes Block-Element eingefügt wurde. Die Elemente davor werden oberhalb und die Elemente danach unterhalb des Block-Elements positioniert.

Inline-Elemente müssen innerhalb von Block-Elementen eingefügt werden und nehmen standardmäßig nur den Platz ein, der benötigt wird. Fügt man innerhalb des Block-Elements mehrere Inline-Elemente ein, werden diese nebeneinander angeordnet. Ist der Platz nicht ausreichend, erfolgt automatisch ein Zeilenumbruch und das Inline-Element wird unterhalb des vorherigen Elements positioniert. Das umschließende Block-Element vergrößert sich entsprechend.

Wurde für das umschließende Block-Element eine Breite und/oder Höhe angegeben und ist der Inhalt größer als die angegebene Größe, so ragt der Inhalt standardmäßig außerhalb der Box und kann dadurch andere Elemente überlagern. Es ist jedoch möglich, das Verhalten zu ändern. Mit der Eigenschaft overflow kann man z.B. angeben, dass übergroßer Inhalt abgeschnitten werden soll. Es ist auch möglich, Scrollleisten einzublenden, damit der Besucher vertikal und horizontal scrollen kann.

Fügt man dem Block-Element einen Rahmen hinzu, z.B. über die Shorthand-Eigenschaft border, wird der Rahmen zur Größe der Box hinzugezählt. Somit vergrößert sich die Höhe und Breite des Elements. Die Höhe ergibt sich aus dem Inhalt oder der Höhe des Block-Elements zuzüglich der Dicke des Rahmens. Die Elemente, die unterhalb der Box platziert sind, verschieben sich dadurch nach unten und die Elemente rechts neben der Box verschieben sich weiter nach rechts.

Für die Breite der Box muss man eine Besonderheit beachten. Normalerweise vergrößert sich die Breite der Box durch die linke und rechte Rahmenlinie und diese werden zur Breite hinzugezählt. Allerdings gilt das nicht bei Block-Elementen, denen keine Breite zugewiesen wurde. Ist keine Breite angegeben und nimmt das Block-Element die verfügbare Breite ein, fallen die Rahmenlinien links und rechts in die Box hinein. Sie verbreitert sich somit nicht. Ist jedoch eine Breite angegeben worden, fallen die Rahmenlinien außerhalb der Box und das Element wird verbreitert. Das Verhalten ist auch bei Elementen zu beobachten, denen die Eigenschaft display: list-item; zugewiesen wurde.

Inline-Elemente können ebenfalls mit einem Rahmen versehen werden. Im Vergleich zu einem Block-Element gibt es jedoch einige Unterschiede beim Verhalten. Außerdem werden Inline-Elemente in "replaced" und "non-replaced" unterschieden. Als replaced werden Inline-Elemente genannt, die von Quellen außerhalb der Website ersetzt werden, z.B. Bilder über den IMG-Tag. Gewöhnliche Texte sind in der Regel non-replaced, da sie ihren Ursprung nicht außerhalb der Website haben.

Wenn man Inline-Elementen einen Rahmen zuweist, die replaced sind, dann werden die Rahmenbreiten rundherum zum Element hinzu addiert und die Box um das Inline-Element vergrößert sich. Nachfolgende Elemente werden dadurch nach unten bzw. nach rechts verschoben. Wenn man Inline-Elementen einen Rahmen zuweist, die non-replaced sind, dann werden die Rahmenbreiten nur links und rechts zur Box hinzu addiert. Die Box verbreitert sich und die Elemente rechts davon werden weiter nach rechts verschoben. Die Höhe ändert sich jedoch nicht. Das kann dafür sorgen, dass die obere und untere Rahmenlinie die nächsten Elemente überlagert. Das kann durch die Eigenschaft line-height verhindert werden, mit dem die Zeilenhöhe von Inline-Elementen angegeben werden kann. Nachfolgend ist schematisch das Verhalten bei einem Inline-Element abgebildet, das non-replaced ist.

Bei einigen Block-Elementen wie z.B. den Überschriften fügen die Browser standardmäßig oben und unten einen Außenabstand hinzu, das margin genannt wird. Wenn kein oder ein anderer Außenabstand angegeben werden soll, kann man die CSS-Einstellungen für margin selbst vorgeben. Das wird häufig dafür genutzt, um einen gewissen Abstand zu benachbarten Elementen vorzugeben. Wenn beispielsweise zwei Bilder neben- oder untereinander angeordnet sind, sieht das meistens nicht gut aus, wenn das eine Bild direkt dem anderen folgt. Wenn die Größen der Bilder identisch sind, könnte man nicht erkennen, dass das zwei Bilder sind. Ein Außenabstand kann hier für eine bessere Optik und Unterscheidung sorgen.

Der Außenabstand nimmt den Platz außerhalb des Rahmens ein und sorgt dafür, dass der Platz sich vergrößert, den die Box einnimmt und dass der Inhalt und die nachfolgenden Elemente sich nach unten bzw. nach rechts verschieben.

Wie beim Rahmen muss man für die Breite die Besonderheit beachten, dass die Box bei Block-Elementen, denen keine Breite zugewiesen wurde, links und rechts sich nicht vergrößert. Die Außenabstände werden links und rechts innerhalb des Anzeigebereichs hinzugefügt und der Inhalt verschiebt sich dadurch nach innen. Das Verhalten ist auch bei Elementen zu beobachten, denen die Eigenschaft display: list-item; zugewiesen wurde.

Beim Inline-Elementen verhält sich der Außenabstand margin wie beim Rahmen. Bei Inline-Elementen, die replaced sind, wird mit margin rundherum ein Abstand eingefügt. Bei Inline-Elementen, die non-replaced sind, wird nur links und rechts ein Außenabstand eingefügt. Auf der folgenden Abbildung ist schematisch dargestellt, wie sich margin auf ein Inline-Element auswirkt.

Einem Block-Element kann auch ein Innenabstand zugewiesen werden. Das geschieht über die Eigenschaft padding. Der Innenabstand sorgt dafür, dass zwischen dem Inhalt und dem Rahmen ein Zwischenraum entsteht. Der Zwischenraum kann für alle vier Seiten angegeben werden oder (wie bei border und margin auch) nur für bestimmte Seiten. Dadurch vergrößert sich die Box und die Inhalte sowie die danach folgenden Elemente verschieben sich nach unten bzw. nach rechts.

Die Besonderheit gilt auch bei padding, dass wenn einem Block-Element keine Breite zugewiesen wurde, die Box sich nicht verbreitert und die Innenabstände in die Box hineinfallen. Wurde jedoch eine Breite angegeben, verbreitert die Eigenschaft padding die Box. Das Verhalten gilt auch für Elemente, denen die Eigenschaft display: list-item; zugewiesen wurde. Nachfolgend ist schematisch der obere und untere Innenabstand bei einem Block-Element dargestellt.

Auch beim Innenabstand mit padding ist zu berücksichtigen, dass der Abstand bei Inline-Elementen, die replaced sind, rundherum eingefügt wird und bei denen, die non-replaced sind, nur links und rechts. Auf der folgenden Abbildung ist schematisch dargestellt, wie sich padding auf ein Inline-Element auswirkt.

Wenn ein Block-Element mehrere Zeilen Text enthält, bezieht sich der obere und untere Innenabstand auf die erste und letzte Zeile. Der Raum zwischen den Zeilen bleibt davon unberührt.

Einem Block-Element kann eine Höhe vergeben werden. Hierfür verwendet man die Eigenschaft height. Als Maßeinheit hat man verschiedene Möglichkeiten. Häufig wird sie jedoch in Pixel oder prozentual angegeben. Die prozentuale Angabe ist nur wirksam, wenn die Höhe des umschließenden Elements bekannt ist, da sich die Angabe darauf bezieht. Man kann auch die Eigenschaft min-height verwenden, damit die Box eine gewisse Flexibilität hat. Damit wird die Box bei übergroßen Inhalten automatisch vergrößert, behält jedoch bei kleineren Inhalten die Mindesthöhe.

Um den Raum für die Höhe zu beeinflussen, die Inline-Elemente in Anspruch nehmen, verwendet man die Eigenschaft line-heigt. Bei mehrzeiligen Texten sorgt das dafür, dass zwischen den Zeilen ein gewisser Abstand entsteht.

Auch die Breite des Block-Elements kann vorgegeben werden. Hierfür verwendet man die Eigenschaft width und als Maßeinheit hat man wie bei der Höhe mehrere Möglichkeiten. Verwendet man eine prozentuale Angabe, bezieht sich das auf die Breite des übergeordneten Elements. Ist diese unbekannt, bezieht sich die Angabe auf die verfügbare Breite des Anzeigebereichs.

Inline-Elemente nehmen nur den Platz ein, den sie benötigen und werden nebeneinander angeordnet. Gewöhnlich kann man ihnen keine Breite mit der Eigenschaft width zuweisen. Außer bei denen, die replaced sind, z.B. beim IMG- oder OBJECT-Tag. Mit der Eigenschaft display: block; können Inline-Elementen das Verhalten von Block-Elementen zugewiesen werden. Sie bleiben dadurch zwar Inline-Elemente, verhalten sich jedoch wie Block-Elemente. Dann ist es auch möglich, den Inline-Elementen mit der Eigenschaft width eine Breite zuzuweisen.

Ein Block-Element kann nicht nur Inline-Elemente enthalten, sondern auch andere Block-Elemente. Diese werden standardmäßig links oben ausgerichtet. in dem Fall ist das Element, das sich innerhalb des Block-Elements befindet, ein Kind-Element. Dem Kind-Element können ebenfalls Abstände, Rahmen etc. zugewiesen werden, wodurch die Position beeinflusst wird.