Den Leerraum um ein Formular herum anpassen

(Auszug aus "CSS Kochbuch" von Christopher Schmitt)

Problem

Der standardmäßig um ein Formular herum angezeigte Leerraum soll verändert werden.

Lösung

Setzen Sie den Wert für den Außenabstand des form-Elements auf null, und passen Sie stattdessen die Innenabstände an Ihre Bedürfnisse an (siehe folgende Abbildung):

form {
 margin: 0;
 padding: 1em 0;
 border: 1px dotted red;
 /* verwendet, um die Auswirkungen der Innenabstände zu verdeutlichen */
}

Für Formular wurden eigene Innenabstände definiert

Abbildung: Für das Formular wurden eigene Innenabstände definiert.

Diskussion

Sollen Formulare in das Design einer Webseite integriert werden, muss oftmals der Leerraum zwischen dem Formular und den übrigen Seitenelementen angepasst werden. Am häufigsten werden hierfür die Innenabstände ober- und unterhalb des Formulars entsprechend der Situation definiert.

Siehe auch

Das Rezept Stildefinitionen für Eingabeelemente zur Gestaltung von input-Elementen.

  

<< zurück vor >>

 

 

 

Tipp der data2type-Redaktion:
Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an:

Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln