Webdesign, Tutorials und mehr - Webmasterpro.de

CSS Außenabstand

Margin ist der Außenabständ zwischen dem Rand eines Elements und anderen Elementen, bzw. dem übergeordneten Element.

Beispiele

1
2
3
4
5
6
7
8
9

#box {
  height:100px;
  width:100px;
  border:1px solid #000;
  margin-top:10px;
  margin-right:10px;
  margin-bottom:10px;
  margin-left:10px;
}

oder

1
2
3
4
5
6

#box {
  height:100px;
  width:100px;
  border:1px solid #000;
  margin: 10px 10px 10px 10px;
}

Erklärung:

Der erste Wert ist für den Abstand oben, der Zweite für den Abstand rechts, der Dritte für den Abstand unten und der Vierte für den Abstand links

Auf jeder Seite den selben Abstand

Soll auf jeder Seite der selbe Abstand sein, kann man eine sehr einfache Schreibweise benutzen

1
2
3
4
5
6

#box {
  height:100px;
  width:100px;
  border:1px solid #000;
  margin: 10px;
}

Rechts und Links der selbe Abstand

Der erste Wert steht für oben, der zweite für links und rechts und der dritte für unten

1
2
3
4
5
6

#box {
  height:100px;
  width:100px;
  border:1px solid #000;
  margin: 10px 20px 30px;
}

Oben / Unten und Links / Rechts der selbe Abstand

Hier steht der erste Wert für oben und unten und der zweite für Links und Rechts

1
2
3
4
5
6

#box {
  height:100px;
  width:100px;
  border:1px solid #000;
  margin: 10px 20px;
}

Kommentare: CSS Außenabstand