CSS: Abstände von Elementen

Du kannst auch eigenen CSS Code nutzen, um die Abstände von Elementen im Theme zu reduzieren oder zu erhöhen. Dies geschieht mithilfe der padding und margin CSS Befehle.

Hintergrundinformation über das CSS Box Model

Um den Unterschied von margin und padding Befehlen zu kennen, empfiehlt sich der Blick auf das CSS Box Model, welches als Grundlage für alle CSS Layouts dient.

Quelle: Matt Ryall ( mattryall.net/blog/2008/08/css-layout-fundamentals-box-model )

Dass Box Model besagt, dass alles in CSS eine rechteckige Box darstellt.

Jede Box hat dabei eine Reihe von Eigenschaften (von außen nach innen):

  • margins = Außenabstand (Abstand zu anderen Boxen)
  • borders = Rahmen ( unterschiedliche Dicke, Stil und Farbe möglich)
  • padding = Innenabstand ( Abstand zwischen Rahmen und Inhalt der Box)
  • und ganz in der Mitte der Inhalt der Box.

Box model diagram
Box model diagram (Rich Hauck)

Als Einsteiger sollte man sich hier einfach merken, dass der Außenabstand margin nicht das Gleiche wie der Innenabstand padding darstellt. Das zeigt sich beispielsweise daran, dass bei einer definierte Hintergrundfarbe der Box der padding Wert die Farbe mit annimmt, der margin Wert jedoch nicht.

CSS Befehle:

Du kannst die Abstände margin und padding eines Elements mit folgendem CSS ändern:

.page-element {
padding: 1em;
margin: 0;
}

Hierbei musst du die Klasse .page-element mit der ID oder Klasse des von dir gewünschten Elements ersetzen, welches andere Abstände bekommen soll. Wir empfehlen die Verwendung des Firefox Plugins Firebug zur Identifizierung der richtigen ID bzw. Klasse.

Beispiele:

Bitte beachte, dass sich die HTML Strukturen je nach verwendeten Theme unterscheiden können und manche Codeschnipsel deshalb nicht in jedem Theme gleichermaßen funktionieren.

Innenabstand im Header Bereich ändern

#header {
padding: 3em;
}

Abstände der Menü Links in der Navigation

#mainnav-menu a {
padding: 1.2em;
}

Abstand zwischen Sidebar Widgets verändern

.widget {
margin-bottom: 1em;
}

 


Falls du Hilfe mit deinen CSS Anpassungen benötigst, können wir einige WordPress Experten empfehlen, welche dir mit Sicherheit gerne weiterhelfen.