Abstände und Rahmen

Um einen Block oder ein anderes Element weiter zu formatieren, gibt es die Möglichkeit, Abstände und Rahmen festzulegen. Bei den Abständen wird zwischen dem Außenabstand und dem Innenabstand unterschieden. Eine weitere Möglichkeit zur Abstandsteuerung ist die Einrückung, welche Sie im vorherigen Thema bereits kennengelernt haben.

Außenabstand

Der Außenabstand legt den Abstand des Blocks zu anderen Elementen (oder dem Regions-Bereich) fest. Der eigentliche Inhaltsbereich von Blöcken, deren Größe nicht festgelegt ist, wird durch die Angabe eines Außenabstands verkleinert. Der Außenabstand wird durch das Attribut margin festgelegt. Mit den Erweiterungen -left (links), -right (rechts), -top (oben) und -bottom (unten) können unterschiedliche Werte für die verschiedenen Seiten festgelegt werden. Somit legt das Attribut margin-left also den Abstand für die linke Seite fest.

XSL-FO-Code:

<?xml version="1.0" encoding="UTF-8" ?>

<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
    <fo:layout-master-set>
        <fo:simple-page-master master-name="DIN-A4" page-height="297mm" page-width="210mm">
            <fo:region-body region-name="inhalt" margin="2cm" />
        </fo:simple-page-master>
    </fo:layout-master-set>
    
    <fo:page-sequence master-reference="DIN-A4">
        <fo:flow flow-name="inhalt">
            <fo:block background-color="red" text-align="center" margin-bottom="1cm">Block 1</fo:block>
            <fo:block background-color="lime" text-align="center" margin-left="15mm" margin-right="5mm">Block 2</fo:block>
            <fo:block background-color="blue" text-align="center" margin="3cm">Block 3</fo:block>
        </fo:flow>
    </fo:page-sequence>
</fo:root>

Rahmen

Der Rahmen ist ein Teil zwischen Außenabstand und Innenabstand und wird mit Hilfe des Attributs border festgelegt. Neben der optionalen Erweiterung für die Seite (also -left, -right etc.) kann ein weiterer Teil an die Attributnamen angehängt werden: -color (Farbangabe), -style (Stil des Rahmens) und -width (Breite). Für den Rahmenstil stehen unter anderem die Werte solid (durchgezogene Linie), double (doppelte Linie), dashed (gestrichelte Linie) und dotted (gepunktete Linie).

XSL-FO-Code:

<?xml version="1.0" encoding="UTF-8" ?>

<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
    <fo:layout-master-set>
        <fo:simple-page-master master-name="DIN-A4" page-height="297mm" page-width="210mm">
            <fo:region-body region-name="inhalt" margin="2cm" />
        </fo:simple-page-master>
    </fo:layout-master-set>
    
    <fo:page-sequence master-reference="DIN-A4">
        <fo:flow flow-name="inhalt">
            <fo:block background-color="red" text-align="center" border-bottom-width="1mm" border-bottom-style="dashed">Block 1</fo:block>
            <fo:block background-color="lime" text-align="center" border-color="gray" border-style="solid" border-left-width="1.5mm" border-right-width="0.5mm">Block 2</fo:block>
            <fo:block background-color="blue" text-align="center" border-color="orange" border-style="dotted" border-top-style="solid">Block 3</fo:block>
        </fo:flow>
    </fo:page-sequence>
</fo:root>

Übrigens: Hintergründe erstrecken sich lediglich über den Inhaltsbereich sowie den dazugehörigen Innenabstand, nicht aber über den Außenabstand und Rahmen.

Innenabstand

Der Innenabstand legt den Abstand zwischen dem Rahmen und dem eigentlichen Inhalt des Blocks fest. Das Festlegen des Innenabstands erfolgt über das Attribut padding oder bei Bedarf über die Attribute padding-left, padding-right, padding-top und padding-bottom.

XSL-FO-Code:

<?xml version="1.0" encoding="UTF-8" ?>

<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
    <fo:layout-master-set>
        <fo:simple-page-master master-name="DIN-A4" page-height="297mm" page-width="210mm">
            <fo:region-body region-name="inhalt" margin="2cm" />
        </fo:simple-page-master>
    </fo:layout-master-set>
    
    <fo:page-sequence master-reference="DIN-A4">
        <fo:flow flow-name="inhalt">
            <fo:block background-color="red" text-align="center" padding-bottom="1cm">Block 1</fo:block>
            <fo:block background-color="lime" text-align="center" padding-left="15mm" padding-right="5mm">Block 2</fo:block>
            <fo:block background-color="blue" text-align="center" padding="3cm">Block 3</fo:block>
        </fo:flow>
    </fo:page-sequence>
</fo:root>

Wichtig: Wenn Sie sich das obige Beispiel anschauen, werden Sie feststellen, dass durch die Angabe der padding-Attribute der Block vergrößert wird und sich nun über die Regionsgrenze erstreckt. Ist dies nicht erwünscht, so muss margin="0" notiert werden. Wird der Außenabstand bereits angegeben, so fällt diese Problematik sowieso weg.

Übrigens: Bei den Attributen für den Rahmen und Innenabstand können an Stelle der Erweiterungen -left, -right, -top oder -bottom für die Seitenbestimmung auch die Erweiterungen -start, -end, -before oder -after verwendet werden.