Anzeige
Tutorialbeschreibung

HTML & CSS für Einsteiger (Teil 32): Außenabstände und Außenränder

HTML & CSS für Einsteiger (Teil 32): Außenabstände und Außenränder

Gerade auch, wenn es um das Layouten von Webseiten geht, werdet ihr es mit der Definition von Außenrändern und Abständen zu tun bekommen. In den letzten Video-Trainings dieser Reihe wird übrigens ein umfassendes Beispiel-Projekt umgesetzt, in dem dann auch noch einmal ganz praktisch der Einsatz dieser und anderer CSS-Eigenschaften gezeigt wird.

... übrigens findest du die komplette Serie hier: HTML & CSS für Einsteiger - Schnapp sie dir in unserem Shop oder in der Kreativ-Flatrate!


Um zwei Dinge wird es in diesem Tutorial gehen: Außenabstände und Außenränder.

Los geht es mit den Außenabständen. Für ein p-Element, das direkt innerhalb von body definiert ist, bedeuten Angaben zu linkem und rechtem Fensterrand den Abstand zu den Außengrenzen des body-Elements. Folgen mehrere Absätze aufeinander, bedeuten die Angaben zum Außenrand oben und unten den Abstand zwischen den einzelnen Absätzen.

Bei der Definition der Außenabstände und Ränder sind übrigens auch negative Werte möglich, wodurch sich Überlappungen erzielen lassen.


Den Außenabstand festlegen

Außenrand und Abstand sind der erzwungene Leerraum zwischen dem aktuellen Element und seinem Eltern- oder Nachbarelement. Sinnvoll sind die folgenden CSS-Eigenschaften in HTML-Elementen, die einen eigenen Absatz erzeugen beziehungsweise einen Block bilden.

Bei margin handelt es sich um die Kurzform der vier Eigenschaften margin-top, margin-right, margin-bottom und margin-left. Dabei sind die folgenden Werte möglich:

auto – der Außenabstand wird automatisch berechnet.
• Prozentangabe – bezieht sich auf das Element, für das margin angegeben wurde.
• Längenangabe – es sind auch negative Werte erlaubt. Dadurch lassen sich Elemente überlappen.

Erlaubt sind bis zu vier Werte:

• ein Wert – Außenabstand oben, unten, links und rechts
• zwei Werte – erster Wert für den Außenabstand oben und unten, der zweite Wert für den Außenabstand rechts und links
• drei Werte – erster Wert für den Außenabstand oben, der zweite Wert für den Außenabstand links und rechts, der dritte Wert für den Außenabstand unten
• vier Werte – erster Wert für den Außenabstand oben, der zweite für rechts, der dritte unten und der vierte links.

Das folgende Beispiel zeigt den Einsatz der allgemeinen margin-Eigenschaften:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
p {
   background-color: yellow;
}
 p.ex {
   margin: 30px 50px 30px 50px; 
   background-color:#FF99FF;
</style>
</head>
<body>
<p>Kamera-Rig aufbauen</p>
<p class="ex">In diesem Video-Training erfährst du, wie du ein Kamera-Rig erstellst und dieses sicher durch den 3D-Raum bewegst. Eine Projektdatei liegt bei.</p>
</body>
</html>

In diesem Beispiel wurden zwei Textabsätze definiert.

Bilder



 
Dem zweiten Absatz wurden zudem Abstände zugewiesen.
margin: 30px 50px 30px 50px;

Diese Angabe bedeutet Folgendes:

• 30 Pixel Abstand nach oben
• 50 Pixel Abstand nach rechts
• 30 Pixel Abstand nach unten
• 50 Pixel Abstand nach links


Einzelangaben für die Abstände

Zuvor wurde die allgemeine margin-Angabe vorgestellt. Ihr könnt aber auch Einzelangaben machen. Über die folgenden Eigenschaften lässt sich für die einzelnen Seitenränder eines Elements der Abstand nach oben, links, unten oder rechts bestimmen.

margin-top – Außenrand/Abstand oben
margin-right – Außenrand/Abstand rechts
margin-bottom – Außenrand/Abstand unten
margin-left – Außenrand/Abstand links

Bei allen vier Eigenschaften können die folgenden Werte verwendet werden:

auto – der Außenabstand wird automatisch berechnet.
• Prozentangabe – bezieht sich auf das Element, für das margin- [top, right, bottom, left] angegeben wurde.
• Längenangabe – es sind auch negative Werte erlaubt. Dadurch lassen sich Elemente überlappen.

Das folgende Beispiel zeigt, wie sich die Einzelangaben effektiv nutzen lassen.
<!DOCTYPE html>
<html>
<head>
<style>
p {
   background-color: yellow;
}
p.ex {
   margin-top: 100px;
   margin-bottom: 100px;
   margin-right: 150px;
   margin-left: 50px;
}
 </style>
 </head>
 <body>
<p>Kamera-Rig aufbauen</p>
<p class="ex">In diesem Video-Training erfährst du, wie du ein Kamera-Rig erstellst und dieses sicher durch den 3D-Raum bewegst. Eine Projektdatei liegt bei.</p>
</body>
</html>

Im Browser sieht das Ergebnis folgendermaßen aus:

Bilder



 

Den Innenabstand festlegen

Beim Innenabstand handelt es sich um den erzwungenen Leerraum zwischen dem Elementinhalt und seinem eigenen Elementrand. Sinnvoll sind die folgenden CSS-Eigenschaften in HTML-Elementen, die einen eigenen Absatz erzeugen beziehungsweise einen Block bilden.

Bei padding handelt es sich um die Kurzform der vier Eigenschaften padding-top, padding-right, padding-bottom und padding-left. Definieren lässt sich hierüber die Breite zwischen dem Rahmen und dem Inhalt eines Elements, also der Innenabstand.

• Prozentangabe – bezieht sich auf das Elternelement.
• Längenangabe

Es können jeweils bis zu vier Werte angegeben werden:

• ein Wert – Innenabstand oben, unten, links und rechts
• zwei Werte – erster Wert für den Innenabstand oben und unten, der zweite Wert für den Innenabstand rechts und links
• drei Werte – erster Wert für den Innenabstand oben, der zweite Wert für den Innenabstand links und rechts, der dritte Wert für den Innenabstand unten
• vier Werte – erster Wert für den Innenabstand oben, der zweite für rechts, der dritte unten und der vierte links.

Auch hierzu ein Beispiel:
<!DOCTYPE html>
<html>
<head>
<style>
p {
   background-color: yellow;}
p.ex {
   padding-top: 25px;
   padding-bottom: 25px; 
   padding-right: 50px;
   padding-left: 50px;
}
</style>
</head>
<body>
<p>Kamera-Rig aufbauen</p>
<p class="ex">In diesem Video-Training erfährst du, wie du ein Kamera-Rig erstellst und dieses sicher durch den 3D-Raum bewegst. Eine Projektdatei liegt bei.</p>
</body>
</html>

 
Und auch hier das Ergebnis im Browser:

Bilder



Über die vier padding-Eigenschaften lassen sich die Innenabstände definieren. Die folgenden vier CSS-Eigenschaften stehen dafür zur Verfügung:

padding-top – Abstand zwischen der oberen Kante des Inhalts und dem oberen Rand
padding-bottom – Abstand zwischen der unteren Kante des Inhalts und dem unteren Rand
padding-left – Abstand zwischen der linken Kante des Inhalts und dem linken Rand
padding-right – Abstand zwischen der rechten Kante des Inhalts und dem rechten Rand.

Bei allen vier Eigenschaften können die folgenden Werte verwendet werden:

• Prozentangabe – bezieht sich auf das Elternelement
• Längenangabe


Weitere Teile


Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait
-versteckt-(Autor hat Seite verlassen)
  • 12.10.2016 - 16:39

Vielen Dank für das Tutorial.

Portrait von Monti7
  • 09.07.2015 - 09:03

Habe mir gerade das PDF geholt. Danke!

Portrait von Kiasa
  • 15.04.2015 - 17:48

Super erklärt! Danke für das Video!

Portrait von BOPsWelt
  • 11.03.2015 - 16:35

Danke für das Tutorial.

Portrait von teste123
  • 10.03.2015 - 22:29

vielen Dank
MfG

Portrait von samtron
  • 10.03.2015 - 22:29

vielen Dank
MfG

Portrait von dlieb
  • 10.03.2015 - 22:04

Vielen Dank für das informative Tutorial.

Portrait von arko2013
  • 10.03.2015 - 21:11

Vielen Dank für das weitere informative Tutorial.

Portrait von Caesarion2004
  • 10.03.2015 - 21:10

VIelen Dank für das interessante Tutorial.

Portrait von Kundentest
  • 10.03.2015 - 20:43

Herzlichen Dank für das Tutorial.

Portrait von fe_web
  • 10.03.2015 - 19:49

Danke - wieder ein lehrreiches und informative Tutorial

Portrait von rocking_sid
  • 10.03.2015 - 19:29

Vielen Dank für das informative Tutorial!

Portrait von pallasathena
Portrait von Enigmon
  • 01.02.2015 - 12:15

Schön einfach erklärt.. Vielen Dank!!

Portrait von fe_web
  • 29.01.2015 - 16:41

Danke für dieses Tutorial

Portrait von pemis
  • 22.01.2015 - 16:30

Mit den vorgestellten CSS-Eigenschaften lässt sich meine Webseite viel genauer gestalten.

Portrait von Kundentest
  • 17.01.2015 - 12:13

Herzlichen Dank für das Video.

Portrait von Caesarion2004
  • 17.01.2015 - 11:06

Vielen Dank für das informative Video!

Portrait von samtron
  • 17.01.2015 - 09:01

Vielen Dank
MfG

Portrait von MARIA52
  • 17.01.2015 - 07:16

Vielen Dank für den nächsten Teil des Tutorials.

x
×
×