Beispiel:CSS-margin-1.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche 
<!DOCTYPE html>
<html lang="de">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css" />
		<title>Innen- und Außenabstand - 1</title>
<style>
body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap:1em
}

nav {
	background: #fffbf0;
	border-color: #e7c157;
}

li {
	background: #dfac20;
	border-color: #8db243;
}
a {
	background: #9fc9df;
	margin: 1em;
}

section {
	background: #ebf5d7;
	border-color: #8db243;
}
section p { margin-top: 5em; }

h1, body>div {
	grid-column: 1 /-1;
	background: #F1F3F4;
}
* {
	border: thin solid;
}

code {
	border: none;
}


		</style>
	</head>
	<body>
		<h1>Innen- und Außenabstand - 1</h1>

<nav>
	<h2>Navigation</h2>
	<ul>
		<li><a href="#link_1.html">Startseite</a>
		</li>
		<li><a href="#link_2.html">Unterseite 1</a>
		</li>
		<li><a href="#link_3.html">Unterseite 2</a>
		</li>
		<li><a href="#link_4.html">Kontakt</a>
		</li>
	</ul>
</nav>
<section>
	<h2>Überschrift zweiter Ordnung</h2>
	<p>Dieser Absatz hat einen Abstand nach oben von <code>5em</code>.</p>
</section>			
<div>
<p>Dieses Beispiel verwendet die Default-Einstellungen  des Browsers.<br>Ausnahmen sind der mit <code>gap</code> festgelegte Abstand zwischen den Rasterfeldern, in denen das Weiß des Hintergrunds durchschimmert, sowie das <code>margin-top</code> des Absatzes rechts.</p>
<p>Beachten Sie den Außenrand der <code>a</code>-Elemente. Da sie Inline-Elemente sind, wirkt <code>margin: 1em</code> nur rechts und links!</p>  
</div>
</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-margin-1.html&oldid=93016“