x

CSS Grundkurs: Padding, Border & Margin

In diesem CSS Tutorial erklären wir dir, dass CSS Box-Modell. Wir gehen dabei genau auf die Befehle Padding, Border & Margin ein.

Play Video

Index.html

<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.1, user-scalable=yes"> <meta name="description" content="Das ist die index.html Datei aus dem SIFA Digital CSS Grundkurs."> <title>Index - CSS Grundkurs</title> <!-- CSS Bereich --> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="box"> <h1>Überschrift</h1> <p>Überall dieselbe alte Leier. Das Layout ist fertig, der Text lässt auf sich warten. Damit das Layout nun nicht nackt im Raume steht und sich klein und leer vorkommt, springe ich ein: der Blindtext. Genau zu diesem Zwecke erschaffen, immer im Schatten meines großen Bruders »Lorem Ipsum«, freue ich mich jedes Mal, wenn Sie ein paar Zeilen lesen. Denn esse est percipi - Sein ist wahrgenommen werden. Und weil Sie nun schon die Güte haben, mich ein paar weitere Sätze lang zu begleiten, möchte ich diese Gelegenheit nutzen, Ihnen nicht nur als Lückenfüller zu dienen, sondern auf etwas hinzuweisen, das es ebenso verdient wahrgenommen zu werden: Webstandards nämlich. </p> </div> </body> </html>

style.css

.box { background-color: #c4e1ff; padding: 10px 20px 10px 20px; border-bottom: solid 5px #7eb4fd; border-left: solid 5px #7eb4fd; margin: 40px; } /*################################*/ h1 { font-family: Arial, sans-serif; font-size: 35px; font-weight: 600; text-decoration: underline; } p { font-family: monospace; font-size: 18px; color: #7c7c7c; text-transform: uppercase; line-height: 25px; }

CSS- und HTML-Dateien herunterladen:

Verpasse keine neuen Inhalte!

Um keine zukünftigen Inhalte zu verpassen, kannst du dich kostenlos in unseren E-Mail Newsletter eintragen. Als Mitglied des E-Mail Newsletter bekommst du exklusive Inhalte sowie eine Übersicht der neuen Tutorials von uns zugesendet.
Du kannst jederzeit deine E-Mail-Adresse aus dem Newsletter wieder austragen.

Für aktuelle Inhalte und Neuigkeiten findest du uns auch bei YouTube, Facebook und Instagram.

E-Mail Newsletter:

Aktuell ist unser Newsletter deaktiviert.

Social Media: