Unterschied zwischen Block und Inline


Ein HTML-Tag kann entweder ein Inline- oder ein Block-Element sein. Blockelemente sind rechteckige Kästen, deren Größe und Position man fest vorgeben kann. Tabellen oder Absätze sind üblicherweise Blockelemente. Ein Blockelement verursacht zwangsläufig einen Zeilenumbruch, wenn es im Fließtext vorkommt.

Inline-Elemente sind HTML-Tags die nur die Schriftformatierung beeinflussen, z.B. <b> für fettgedruckt. Sie befinden sich, wie der Name sagt "in line", also in der Zeile, passen sich also dem restlichen Text an.

Es gibt eine CSS-Eigenschaft, um den Elementtyp zu verändern: display
display: block; erzeugt ein Block-Element
display: inline; erzeugt ein Inline-Element

(Übrigens: display: none; blendet das Element komplett aus.)

Blöcke und Boxen


Um den Inhalt eines Blockes herum liegen noch drei Schichten: der innere Abstand, der Rahmen und der äußere Abstand. Mit diesem Trio kann man das Aussehen eines solchen Blockes sehr genau beeinflussen. Zuerst eine kleine Skizze:


von hicksdesign unter CC-BY

margin definiert den Abstand, den ein Element zu den anderen Elementen auf der Seite hat. Der margin befindet sich außerhalb des Rahmens.

border gibt den (sichtbaren) Rahmen um ein Element herum an. Er befindet sich zwischen margin und padding.

padding besagt, wie weit der Inhalt des Elementes vom Rahmen entfernt ist.

Hintergrundfarbe und -bild enden mit dem Rahmen.

Wie verwende ich diese Angaben


margin und padding können in verschiedenen Einheiten angegeben werden. Eine mögliche Einheit ist Pixel (px). Es gibt jedoch diverse weitere Einheiten.

p { padding: 10px; }            /* innerer Abstand oben, rechts, unten und
                                   links 10 Pixel */
p { padding: 5px 10px 0 10px; } /* innerer Abstand oben=  5px, rechts= 10px, 
                                                   unten= 0px, links=  10px    */

Wie am Beispiel zu sehen ist, gibt es zwei Möglichkeiten, die Abstände zu definieren:
  • Eine Angabe gilt für alle Richtungen
  • Für jede Seite eine einzelne Angabe im Uhrzeigersinn: oben, rechts, unten, links

Null ist null, egal in welcher Einheit: also kann man sie weglassen.

border ist eine Kombination aus drei Werten: Dicke des Rahmens (border-width), Aussehen (border-style) und Farbe (border-color). Die drei Werte werden in dieser Reihenfolge durch Leerzeichen getrennt angegeben.

Möglichkeiten für border-style:


border-style: solid;
border-style: inset;
border-style: outset;
border-style: dashed;
border-style: dotted;
border-style: ridge;
border-style: groove;
border-style: double;




Beispiel
Ein praktisches Beispiel für die Kombination dieser Eigenschaften sind Infokästen wie dieser hier...
.wichtig {                    /* Die folgenden Eigenschaften gelten für Elemente
                                 mit class="wichtig" */
 padding: 10px;               /* Zehn Pixel Abstand zwischen Text und Rahmen */
 border: 2px solid #884444;   /* Rahmen: zwei Pixel dick, durchgezogene Linie
                                 in dunkelrot */
 background-color: #ffeeee;   /* Hintergrundfarbe ist ein helles rot */
}






Kommentare