Die Eigenschaften margin, padding und border ermöglichen es, zusätzlichen Raum um Elemente zu schaffen und so das Erscheinungsbild, die Lesbarkeit und die Benutzerfreundlichkeit einer Webseite zu verbessern. Im Folgenden betrachten wir jede dieser Eigenschaften genauer.

Eigenschaften margin und padding

padding

padding bezeichnet den Abstand zwischen dem Inhalt eines Elements und dessen Rahmen.

padding: top right bottom left

Es gibt mehrere Möglichkeiten, einen Wert für das Padding zu vergeben.

Kurzschreibweise

/* Same padding of 20px applied to all four sides: */
padding: 20px;

/* Top and bottom paddings of 10px, left and right paddings of 20px: */
padding: 10px 20px;

/* Top padding of 10px, left and right paddings of 20px, bottom padding of 5px: */
padding: 10px 20px 5px;

/* Top padding of 10px, right padding of 15px, bottom padding of 20px, left padding of 25px: */
padding: 10px 15px 20px 25px;

Jedes Padding einzeln

padding-top: 10px;
padding-right: 15px;
padding-bottom: 25px;
padding-left: 5px;

margin

margin bezeichnet den Abstand zwischen einem Element und den angrenzenden Elementen. Es ist der Bereich außerhalb des Rahmens eines Elements.

margin: top right bottom left

Wir können den margin auf verschiedene Arten vergeben.

Kurzschreibweise

/* Same margin of 20px applied to all four sides: */
margin: 20px;

/* Top and bottom margins of 10px, left and right margins of 20px: */
margin: 10px 20px;

/* Top margin of 10px, left and right margins of 20px, bottom margin of 5px: */
margin: 10px 20px 5px;

/* Top margin of 10px, right margin of 15px, bottom margin of 20px, left margin of 25px: */
margin: 10px 15px 20px 25px;

Jeder margin einzeln

margin-top: 10px;
margin-right: 15px;
margin-bottom: 25px;
margin-left: 5px;

border-Eigenschaft

border bezeichnet die Linie, die das Padding und den Inhalt eines Elements umgibt. Sie ist der Bereich, der den Inhalt des Elements von seinem Außenabstand (Margin) trennt.

border: width style color;

Kurzschreibweise

border: 4px solid brown;

Das bedeutet, dass der Rahmen (Border) auf allen Seiten gleich aussieht. Die width beträgt 4px, der style ist solid und die color ist brown.

Betrachten wir das folgende Beispiel und analysieren die möglichen Rahmenstile:

Ausgabe

Jede Grenze separat

/* Instead of `top`, can be used any side (`right`, `left`, or `bottom`) */
border-top-color: aquamarine;
border-top-width: 12px;
border-top-style: groove;
border-top-right-radius: 4px;
border-top-left-radius: 8px;