Innenabstände in der Box werden über padding gesetzt. Es gibt die Abstände oben, rechts, unten und links (achte auf die Reihenfolge!).
Zum Beispiel:
padding-top: 10px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 70px;
Das ist eine Menge Tipperei und kann ersetzt werdsen durch:
padding: 10px 30px 50px 70px;
Nochwas:
padding: 20px;
setzt überall einen Abstand von 20 Pixeln.
Das gleiche gilt auch für die Außenabstände, die über margin-xxxx gesetzt werden.
Aufgabe: Erstelle die Dateien ai/css/kurzform/design.css
#kastenrot { background-color: red;
width: 200px;
padding: 100px;
}
#kastengruen { background-color: green;
width:400px;
padding: 20px 50px 100px 150px;
}
Aufgabe: Erstelle die Dateien ai/css/kurzform/boxen.html
<html>
<head>
<link href=“design.css“ type=“text/css“ rel=“stylesheet“ />
</head>
<body>
<h1>jetzt HTML lernen mit CSS</h1>
<div id=“kastenrot“>
<p> Ich bin Text. Alles was in diesem Div steht gehoert zur Gruppe kastenrot und bekommt
die Eigenschaften, die in der CSS-Datei angegeben wurden. Hier jetzt auch mit Innenabstand</p>
</div>
<div id=“kastengruen“>
<p> Ich bin auch ein Text, gehöre aber einem anderen Div an, der Gruppe kastengruen. Jetzt habe ich einen Innenabstand.
</p>
</div>
</body>
</html>
Aufgabe: Experimentiere mit verschiedenen Werten in deiner css-Datei.
Aufgabe: Experimentiere auch mit margin!
Aufgabe: Experimentiere mit dem folgenden Tag
float: right;
Setze diesen Tag abwechselnd in die divs #kastenrot, #kastengruen, #kastenblau. Was stellst du fest?
Dieser Tag ist besonders wichtig, um die Aufgabe in Projekt Schulbar jetzt aber richtig super geheim zu lösen.
Schreibe einen Kommentar