Die Behandlung des Außenabstands funktioniert ganz ähnlich wie die des Innenabstands. Man muss dafür nur die Eigenschaft margin statt padding benutzen. Zu beachten ist aber, dass sich ein relativer Außenabstand nicht nach der Breite des Elements selbst richtet, sondern nach der Breite des Elternelements, also dem Element, in dem es sich befindet. Der Außenabstand wird nicht mit der Hintergrundfarbe des Elements eingefärbt, sondern mit der Hintergrundfarbe des Elements, in dem sich unsere Box befindet. Da sich der Außenabstand außerhalb des Rahmens befindet, sieht man ihn am besten, wenn man sich mehrere benachbarte HTML-Elemente ansieht.
Füge also dem vorigen HTML-Code folgende Box hinzu:

<div id="box2">Noch eine Box!</div>

Im CSS-Code formatieren wir nun beide und geben ihnen auch einen Außenabstand:

#box {
	background-color: red;
	width: 300px;
	height: 50px;
	margin: 30px;
	padding: 10px;
	border: 1px solid black;
}
#box2 {
	background-color: green;
	width: 300px;
	height: 50px;
	margin: 30px;
	padding: 10px;
	border: 1px solid black;
}

Aufgaben

  1. Experimentiere auch mit Außenabständen von <span>-Elementen.
  2. Sieh dir an, wie die relative Angabe des Außenabstands funktioniert.