Benötigtes Vorwissen

Schüler-Autoren dieses Artikels sind Luka Bruns und Nils Buss

Position: Absolut

Mit diesem Befehl kann man verschiedene z.B Infoboxen etc. unabhängig vom Textfluss mit den Befehlen left, right, top & bottom bestimmen. Lücken bleiben dabei nicht bestehen.

Ebenfalls sind Größenangaben mit width & height sowie Abstände mit margin & padding möglich.

Erzeugt werden soll das folgende Bild:

HTML-Code

<html>

<head>

<link rel="stylesheet" href="Schneemann.css">

</head>

<body>

<!--Beispieltext (mehrzeilig)-->

<span id="kreis"></span>

</body>

</html>

Style.css

#kreis{

height:140px;

width:140px;

background-color:#FFFFFF;

border: 1px solid #000000;

border-radius: 50%;

position: absolute;

top: 175px;

left: 200px;

z-index:2;

}

Position: Relativ

Wird verwendet als Bezugspunkt für absolut positionierte Kind Elemente. Das Element ist somit „an sich selbst“ ausgerichtet. Das Element kann trotzdem mit top, bottom, left & right ausgerichtet werden.

Abstände: Margin

Margin ist der Außenabstand. Ergänzt werden kann der Margin Befehl mit

Top

Bottom

Left

Right

Abstände: Padding

Padding ist der Innenabstand.

Ergänzend haben wir eine zusammenfassende Grafik hinzugefügt.

Quelle: https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Abstand/margin