Innenrand, Außenabstand (padding, margin)


(letzte Änderung an dieser Seite: 03.08.2010)

Folien



(letzte Synchronisation der PDF-Präsentation: 02.08.2017)

Falls keine PDF-Präsentation zu sehen ist, klicken Sie zum Download hier: Direktdownload PDF-Präsentation

Übungen

Alle Übungen finden Sie in der Materialsammlung (dort auch alle zusätzlichen Dateien wie Bilder, Klassendiagramme oder HTML-Vorlagen!).

Die aktuelle Übung können Sie hier als txt-File herunterladen.

***** Übungen: CSS - Innenrand, Außenabstand *****

CSS_11-1: Innen- und Außenabstände nach Vorlage einrichten

Definieren Sie die Innen- und Außenabstände so, dass das Ergebnis ungefähr der Abbildung 03css/css11-bild-vorlage-uebung1.png entspricht. Tipp: Bei den p-Absätzen müssen Sie jeweils nur eine Stildefinition schreiben, bei der ul-Liste zwei.


HTML-Code
<html>
<head>
	<title>Uebung: Innen- und Aussenabstaende</title>
	<style type="text/css">
		p, ul
		{
			border : 4px solid #0000ff;
		}
	</style>
</head>
<body>
 
<h1>Absatz 1</h1>
<p class="rahmen1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante. Pellentesque euismod turpis libero, vel egestas nulla. Sed vulputate tortor ipsum, vel vestibulum risus. Sed et nulla ante, a mollis odio. Curabitur posuere porttitor ornare. Ut convallis leo pharetra ipsum tempor eleifend. Quisque quis.</p>
 
<h1>Absatz 2</h1>
<p class="rahmen2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante. Pellentesque euismod turpis libero, vel egestas nulla. Sed vulputate tortor ipsum, vel vestibulum risus. Sed et nulla ante, a mollis odio. Curabitur posuere porttitor ornare. Ut convallis leo pharetra ipsum tempor eleifend. Quisque quis.</p>
 
<h1>Liste</h1>
<ul class="rahmen3">
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante.</li>
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante.</li>
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante.</li>
</ul>
 
<h1>Absatz 3</h1>
<p class="rahmen4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante. Pellentesque euismod turpis libero, vel egestas nulla. Sed vulputate tortor ipsum, vel vestibulum risus. Sed et nulla ante, a mollis odio. Curabitur posuere porttitor ornare. Ut convallis leo pharetra ipsum tempor eleifend. Quisque quis.</p>
 
<h1>Absatz 4</h1>
<p class="rahmen5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante. Pellentesque euismod turpis libero, vel egestas nulla. Sed vulputate tortor ipsum, vel vestibulum risus. Sed et nulla ante, a mollis odio. Curabitur posuere porttitor ornare. Ut convallis leo pharetra ipsum tempor eleifend. Quisque quis.</p>
 
</body>
</html>
 



CSS_11-2: Innen- und Außenabstände definieren

Versehen Sie die Absätze bzw. die Liste mit folgenden Stildefinitionen:
1. rahmen1: 400px breit, Abstand vom linken Rand 100px, Innenabstand 20px;
2. rahmen2: 600px breit, Abstand vom linken Rand 100px, Innenabstand 5px;
3. rahmen3: 300px breit, Abstand vom linken Rand 100px, Innenabstand 5px;
4. rahmen4: 20% breit, Abstand vom linken Rand 400px, Innenabstand 2px;
5. rahmen5: 450px breit, Abstand vom linken Rand 100px, Innenabstand 5px.

HTML-Code
<html>
<head>
	<title>Uebung: Innen- und Aussenabstaende</title>
	<style type="text/css">
		p, ul
		{
			border : 4px solid #0000ff;
		}
	</style>
</head>
<body>
 
<h1>Absatz 1</h1>
<p class="rahmen1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante. Pellentesque euismod turpis libero, vel egestas nulla. Sed vulputate tortor ipsum, vel vestibulum risus. Sed et nulla ante, a mollis odio. Curabitur posuere porttitor ornare. Ut convallis leo pharetra ipsum tempor eleifend. Quisque quis.</p>
 
<h1>Absatz 2</h1>
<p class="rahmen2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante. Pellentesque euismod turpis libero, vel egestas nulla. Sed vulputate tortor ipsum, vel vestibulum risus. Sed et nulla ante, a mollis odio. Curabitur posuere porttitor ornare. Ut convallis leo pharetra ipsum tempor eleifend. Quisque quis.</p>
 
<h1>Liste</h1>
<ul class="rahmen3">
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante.</li>
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante.</li>
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante.</li>
</ul>
 
<h1>Absatz 3</h1>
<p class="rahmen4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante. Pellentesque euismod turpis libero, vel egestas nulla. Sed vulputate tortor ipsum, vel vestibulum risus. Sed et nulla ante, a mollis odio. Curabitur posuere porttitor ornare. Ut convallis leo pharetra ipsum tempor eleifend. Quisque quis.</p>
 
<h1>Absatz 4</h1>
<p class="rahmen5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante. Pellentesque euismod turpis libero, vel egestas nulla. Sed vulputate tortor ipsum, vel vestibulum risus. Sed et nulla ante, a mollis odio. Curabitur posuere porttitor ornare. Ut convallis leo pharetra ipsum tempor eleifend. Quisque quis.</p>
 
</body>
</html>
 



CSS_11-3: Außenabstände definieren

Verändern Sie den originalen Quellcode gemäß den folgenden Angaben. Verändern Sie dabei nur die Außenabstände (“margin”). Tipp: Damit Sie die Abstände zwischen einzelnen Elementen pixelgenau definieren können, müssen Sie die Innenabstände (“padding”) einiger Elemente auf 0 setzen.

1. Zwischen den Überschriften und den zugehörigen Absätzen sollen genau 3 Pixel Abstand sein.
2. Zwischen den Absätzen und der jeweils folgenden Überschrift soll ein Abstand von genau 20px sein.
3. Alle Elemente sollen 30px vom linken Fensterrand entfernt sein. Der Abstand zum rechten Fensterrand soll 100px betragen.
4. Zwischen der Überschrift “Liste” und der Liste (“ul”) sollen genau 10px Abstand sein.
5. Zwischen den einzelnen Listenelementen (“li”) soll ein Abstand von jeweils 3px sein.
6. Der gesamte Inhalt der Seite (“body”) soll vom oberen Rand des Browserfensters einen Abstand von 50px haben.


HTML-Code
<html>
<head>
	<title>Uebung: Innen- und Aussenabstaende</title>
	<style type="text/css">
		p, ul
		{
			border : 4px solid #0000ff;
		}
	</style>
</head>
<body>
 
<h1>Absatz 1</h1>
<p class="rahmen1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante. Pellentesque euismod turpis libero, vel egestas nulla. Sed vulputate tortor ipsum, vel vestibulum risus. Sed et nulla ante, a mollis odio. Curabitur posuere porttitor ornare. Ut convallis leo pharetra ipsum tempor eleifend. Quisque quis.</p>
 
<h1>Absatz 2</h1>
<p class="rahmen2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante. Pellentesque euismod turpis libero, vel egestas nulla. Sed vulputate tortor ipsum, vel vestibulum risus. Sed et nulla ante, a mollis odio. Curabitur posuere porttitor ornare. Ut convallis leo pharetra ipsum tempor eleifend. Quisque quis.</p>
 
<h1>Liste</h1>
<ul class="rahmen3">
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante.</li>
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante.</li>
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante.</li>
</ul>
 
<h1>Absatz 3</h1>
<p class="rahmen4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante. Pellentesque euismod turpis libero, vel egestas nulla. Sed vulputate tortor ipsum, vel vestibulum risus. Sed et nulla ante, a mollis odio. Curabitur posuere porttitor ornare. Ut convallis leo pharetra ipsum tempor eleifend. Quisque quis.</p>
 
<h1>Absatz 4</h1>
<p class="rahmen5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante. Pellentesque euismod turpis libero, vel egestas nulla. Sed vulputate tortor ipsum, vel vestibulum risus. Sed et nulla ante, a mollis odio. Curabitur posuere porttitor ornare. Ut convallis leo pharetra ipsum tempor eleifend. Quisque quis.</p>
 
</body>
</html>
 




CSS_11-4: Innenabstände definieren

Verändern Sie den originalen Quellcode gemäß den folgenden Angaben. Verändern Sie dabei nur die Innenabstände (“padding”). Tipp: Damit Sie die Abstände zwischen einzelnen Elementen pixelgenau definieren können, müssen Sie die Außenabstände (“margin”) einiger Elemente auf 0 setzen.

Hinweis: Da es sich um Abstände zwischen Elementen handelt, würde man diese Justierungen in der Praxis eher wie in Aufgabe 1 gefordert (nämlich über Außenabstände, “margin”) vornehmen. Hier geht es aber um die schiere Übung.

1. Zwischen den Überschriften und den zugehörigen Absätzen sollen genau 3 Pixel Abstand sein.
2. Zwischen den Absätzen und der jeweils folgenden Überschrift soll ein Abstand von genau 20px sein.
3. Alle Elemente sollen 30px vom linken Fensterrand entfernt sein. Der Abstand zum rechten Fensterrand soll 100px betragen.
4. Zwischen der Überschrift “Liste” und der Liste (“ul”) sollen genau 10px Abstand sein.
5. Zwischen den einzelnen Listenelementen (“li”) soll ein Abstand von jeweils 3px sein.
6. Der gesamte Inhalt der Seite (“body”) soll vom oberen Rand des Browserfensters einen Abstand von 50px haben.


HTML-Code
<html>
<head>
	<title>Uebung: Innen- und Aussenabstaende</title>
	<style type="text/css">
		p, ul
		{
			border : 4px solid #0000ff;
		}
	</style>
</head>
<body>
 
<h1>Absatz 1</h1>
<p class="rahmen1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante. Pellentesque euismod turpis libero, vel egestas nulla. Sed vulputate tortor ipsum, vel vestibulum risus. Sed et nulla ante, a mollis odio. Curabitur posuere porttitor ornare. Ut convallis leo pharetra ipsum tempor eleifend. Quisque quis.</p>
 
<h1>Absatz 2</h1>
<p class="rahmen2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante. Pellentesque euismod turpis libero, vel egestas nulla. Sed vulputate tortor ipsum, vel vestibulum risus. Sed et nulla ante, a mollis odio. Curabitur posuere porttitor ornare. Ut convallis leo pharetra ipsum tempor eleifend. Quisque quis.</p>
 
<h1>Liste</h1>
<ul class="rahmen3">
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante.</li>
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante.</li>
	<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante.</li>
</ul>
 
<h1>Absatz 3</h1>
<p class="rahmen4">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante. Pellentesque euismod turpis libero, vel egestas nulla. Sed vulputate tortor ipsum, vel vestibulum risus. Sed et nulla ante, a mollis odio. Curabitur posuere porttitor ornare. Ut convallis leo pharetra ipsum tempor eleifend. Quisque quis.</p>
 
<h1>Absatz 4</h1>
<p class="rahmen5">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut aliquam erat. In eu dignissim ante. Pellentesque euismod turpis libero, vel egestas nulla. Sed vulputate tortor ipsum, vel vestibulum risus. Sed et nulla ante, a mollis odio. Curabitur posuere porttitor ornare. Ut convallis leo pharetra ipsum tempor eleifend. Quisque quis.</p>
 
</body>
</html>
 

Nach oben