Außenrand, Rahmen, Innenabstand - Quelltext - Cascading Style Sheets

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
 <title>Außenrand, Rahmen, Innenabstand - Cascading Style Sheets - Workshop Internet-Pr&auml;senz</title>

 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="Content-Language" content="DE" />
 <meta http-equiv="Content-Style-Type" content="text/css" />

 <meta name="description"
  content="&Uuml;bung Cascading Style Sheets. Außenrand, Rahmen, Innenabstand." />
 <meta name="keywords" content="HTML, Cascading Style Sheets" />
 <meta name="author" content="Roland Unger" />

 <style type="text/css">
 <!--
  body {
     background: #ffffdd;      /* hellgelb */
  }

  .identisch {
     border: 1px solid #000;
     margin: 1em 0;
     padding: 0.5em;
     background: #ffffff;      /* weiss */
  }

  .unterschiedlich {
     margin: 1em 0;
     padding: 0.5em 1.5em 2em 1em;
     border-top: 1em solid #ff0000;
     border-right: 1.5em solid #00ff00;
     border-bottom: 0.5em dashed #0000ff;
     border-left: 0.5em dotted #000;
     background: #ffffff;      /* weiss */
  }

 -->
 </style>
</head>

<body>

<h1>Workshop Internet-Präsenz</h1>

<h2>Außenrand, Rahmen, Innenabstand - Cascading Style Sheets</h2>

<p>Nachfolgende Beispiele demonstrieren die Möglichkeiten der
Randgestaltung, die für alle Elemente anwendbar sind. Beachten
Sie, dass der Außenrand und der Innenrand transparent sind:
der Außenbereich übernimmt die Hintergrundfarbe des übergeordneten
Elements, der Innenbereich die Hintergrundfarbe des zugehörigen
Elements.</p>

<p class="identisch">Dieser Absatz besitzt auf allen vier Seiten
eine identische Umrahmung.</p>

<p class="unterschiedlich">Dieser Absatz besitzt auf allen vier Seiten
eine unterschiedliche Umrahmung und unterschiedliches Padding.</p>

</body>
</html>