Depot43-Unterlagen

HTML Elemente

            
            



<!doctype html>
<html lang="de">
<head>
	<meta charset=utf-8>
	<title>HTML5 / CSS - Padding</title>
	<style>
		body {
			display:flex;
			margin:0;
		}
		p {
			background: #ccc;
			border: 1px solid #fff;
		}
		p.box1 {
			padding:10px;
		}
		p.box2 {
			padding:40px
		}
	</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 9 > 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 Innenabstände gesetzt.

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

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

Verändere die Werte von "padding" 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 {
            padding-top: 40px;
            padding-right; 10px;
            padding-bottom: 30px;
            padding-left:20px;
        }

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

        p.box1 {
            padding: 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 {
            padding: 40px;
            width:200px;
            height:100px;
        }

Beachte: nicht alle Eingaben von Padding werde ausgeführt. Wenn ein Element 100px Höhe hat, kann es nicht 200px Innenrand besitzen. Eingegebene Angaben können sich wiedersprechen.
Prüfe das Verhalten im HTML-Bereich.