Untitled

<!doctype html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <title>Die CSS Layout Eigenschaften</title>
    <style>
      body {
        background-color: grey;
      }
      div {
        background-color: white;
      }
      #box3 {
        background-color:gold;
        width:80%;        /* Breite des Elements, px, % */
        height:50px;       /* Höhe des Elements, px, % */
        max-width: 800px; /* Obergrenze für relative Breite */
        min-width: 600px; /* Untergrenze für relative Breite */
        /* die Eigenschafen width und height können für inline-Elemente nicht festegelegt werden */
      }

      #box2 {
        background: lightblue;
        /* Innenabstand - Anstand zwischen Inhalt und Rand
           ausfürliche Schreibweise
        padding-top: 10px;
        padding-right: 20px;
        padding-bottom: 40px;
        padding-left: 80px;

        Kurzschreibweise:

        padding: -top [-right] [-bottom] [-left]
        */
        padding: 10px 20px 40px 80px;

         /* Außenabstand - Anstand zwischen Rand und benachbarten Objekten
           ausfürliche Schreibweise
        margin-top: 10px;
        margin-right: 20px;
        margin-bottom: 40px;
        margin-left: 80px;
        Kurzschreibweise:

        margin: -top [-right] [-bottom] [-left]
        */
        margin: 10px 20px 40px 80px;

      }

      #box1 {
        width:500px;
        height: 200px;
        margin: 0 auto;
      }

    </style>
  </head>
  <body>
    <h1>Die CSS Layout Eigenschaften</h1>
    <div id="box1">Das ist die erste Box.</div>
    <div id="box2">Das ist die <span>zweite</span> Box. Das ist die <span>zweite</span> Box. Das ist die <span>zweite</span> Box. Das ist die <span>zweite</span> Box.</div>
    <div id="box3">Aller guten Dinge sind drei.</div>

  </body>
</html>