Depot43-Unterlagen

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
	<meta charset=utf-8>
	<title>HTML5 / CSS - Margin</title>
	<style>
		body {
			display:flex;
			margin:0;
		}
		p {
			background: #ccc;
		}
		p.box1 {
			margin: 40px;
		}
		p.box2 {
			margin: 10px;
		}
	</style>
</head>
<body>
	<p class="box1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi repudiandae est dignissimos vitae laborum.</p>
	<p class="box2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi repudiandae est dignissimos vitae laborum.</p>
</body>
</html>


 

            

Aufgabe 8 > weiter

Im Editor sind zwei Absätze vorbereitet. Beide sind im body nebeneinander platziert und haben einen Grauen Hintergrund. Sie besitzen keine individuellen Grössenangaben, daher teilen sie ihren Platz gleichmässig (Flex-Box-verhalten). Es wurden aber unterschiedliche Aussenabstände gesetzt.

p.box1 > margin: 40px;
p.box2 > margin: 10px;

Verändere die Werte und setze zusätzliche Eigenschaften, um das verhalten zu prüfen!

Verändere die Werte von "margin" für "p.box1" und "p.box2", beachte wie sich die beiden Boxen verhalten.

Du kannst verschiedene Werte für die einzelnen Richtungen eingeben. Beispiel:

        p.box1 {
            margin-top: 40px;
            margin-right; 10px;
            margin-bottom: 30px;
            margin-left:20px;
        }

Du kannst das gleiche auch als Kuzschreibweise hinterlegen. (im Uhrzeigersinn: oben, rechts, unten, links) Beispiel:

        p.box1 {
            margin: 40px 10px 30px 20px;
        }

Füge "p.box1" und "p.box2" zusätzlich Werte für die Breite und Höhe dazu. Beispiel:

        p.box1 {
            margin: 40px;
            width:200px;
            height:100px;
        }

Prüfe das Verhalten im HTML-Bereich.