Padding

Ich weiß, dass es schon ein Tutorial über Padding gibt, aber hier möchte ich es etwas ausführlicher Erklären.

Bei dem Tutorial von Delite, wurde etwas über den Abstand von Objekten erklärt
KLICK

Jedoch wird der Padding meisten beim Css für Content benutz,
denn der Padding legt den Abstand zwischen den Rand und dem Content an.

So kann man mit dem folgenden Code den Abstand von innen bestimmen.


content {

padding-top: 1px;
padding-right: 2;
padding-bottom: 3;
padding-left: 5;

}


padding-top : Abstand von oben.
padding-right: Abstand von techts.
padding-bottom: Abstand von unten.
padding-left: Abstand von links.

Natrülich kann man es viel kürzer machen mit einen Wert, 2 Werten, 3 Werten und 4 Werten. Dabei fallen "top, "right", "bottom" und "left" weg.

Beispiel mit einem Wert


content {
padding: 1px;
}


Steht nur ein Wert nach Padding bedeutet das, dass es für oben,techts,unten und links gilt.


Beispiel mit zwei Werten


content {
padding: 3px 4px;
}


Wenn zwei Werte dastehen gilt der erste Wert für oben und unten , der zweite für rechts und links.


Beispiel mit drei Werten


content {
padding: 3px 4px 5px;
}

Wenn drei Werte da stehen, dann gilt der erste Wert für oben , der zweite für links und rechts und der dritte für unten.


Beispiel mit vier Werten


content {
padding: 3px 4px 5px 5px;
}

Wenn drei Werte da stehen, dann gilt der erste Wert für oben , der zweite für rechts, der dritte für unten und der vierte für links.

Margin
Margin ist eher das Gegenteil zur Padding, denn der bestimmt den Außenabstand von Rand und Content.

Für ihn gilt das gleiche wie bei Padding, man muss halt nur "Padding" in "Margin" um ändern.


content {

margin-top: 1px;
margin-right: 2;
margin-bottom: 3;
margin-left: 5;

}



Das gleiche gilt auch bei der verkürzten Version mit einen Wert,zwei Werten, drei Werten oder Vierwerten.

Ich hoffe ich konnte einigen damit weiterhelfen.