Beispiel:CSS-margin-2.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 - 2</title>
<style>
.ein_wert {
  margin: 1em;
	padding: 1em;
}
.zwei_werte {
  margin: 1em 3em;
	padding: 1em 3em;
}

.drei_werte {
  margin: 2em 1em 3em;
	padding: 2em 1em 3em;
}
.vier_werte {
  margin: 1em 2em 3em 4em;
	padding: 1em 2em 3em 4em;
}

section {
	display: grid;
	grid-template-columns: 14em 23em;
	gap:2em 1em;
	border: thin dashed green;
}
section div {
	background: #ebf5d7;
	border: thin solid;
	border-color: #8db243;	
}

section p { 
	width: 10em; 
	border: thin solid;
background: white;
}
span{border:thin dotted;display:block;}

section code {
	text-align: center;
	display: block;
	font-size: 1.18rem;
}


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

<section>
	<div>
  	<p class="ein_wert"><span><code>1em</code><br>1 Wert:<br>alle 4 Seiten 1em</span></p>
  </div>    
	<div>
  	<p class="zwei_werte"><span><code>1em 3em</code><br>2 Werte:<br> oben und unten 1em<br>rechts und links 3em</span></p>
  </div>  
	<div>
  	<p class="drei_werte"><span><code>2em 1em 3em</code><br>3 Werte:<br>oben 2em<br>rechts und links 1em<br>unten 3em</span></p>
  </div>    
	<div>
  	<p class="vier_werte"><span><code>1em 2em 3em 4em</code><br>4 Werte:<br>oben 1em<br>rechts 2em<br>unten 3em<br>links 4em</span></p>
  </div>    
<div>
	<p><span><code>-</code>
		<br>ohne CSS:
		<br>keine Polsterung
		<br>Abstand oben und unten</span></p>
</div>    
<div >
	<p style="margin-inline:auto;padding-inline: 5px;"><span><code style="font-size:0.9rem;">margin-inline:auto</code><code style="font-size:0.9rem;">padding-inline: 5px;</code>
	<br>horizontale Zentrierung
	</span>
	</p>
</div>	
</section>	

<p>Die <code>margin</code>- und <code>padding</code>-Eigenschaften können 1, 2, 3 oder 4 Werte enthalten, die von oben im Uhrzeigersinn nach rechts, unten und links zugewiesen werden.</p>	
<p>Die <code>gap</code>-Eigenschaft kann nur ein oder zwei Werte enthalten.</p>	

	</body>
</html>
Abgerufen von „http://wiki.selfhtml.org/index.php?title=Beispiel:CSS-margin-2.html&oldid=93022“