Suche im Forum:
Suchen


Autor Nachricht
Beitrag30.07.2010 um 08:38 (UTC)    
Titel: Tutorial: CSS Abstände padding, margin

Tutorial: CSS Abstände
In diesem Tutorial werde ich ihnen kurz erklären wie man Abstände,
häufig auch Polsterung genannt, zwischen Inhalt und Rahmen einer Box festlegen kann.

CSS Innenabstände
Für Innenabstände im Rahmen oder in einer Box verwendet man in CSS den Code padding. Padding bedeutet Innenabstand,
den können Sie durch eine Längenangabe oder Prozentangabe festlegen.

Erklärung Längenangabe
px Längen- und Breitenangabe relativ zur Bildschirmauflösung. 1px = 1 Pixel border-width:5px;

Erklärung Prozentangabe
Längen- und Breitenangabe relativ zur Normalgröße von Elementen, bzw. zur Fenstergröße. width:80%;

Der Innenabstand unterscheidet sich in vier verschiedene Richtungen:
padding-bottom Innenabstand nach unten
padding-left Innenabstand nach links
padding-right Innenabstand nach rechts
padding-top Innenabstand nach oben

Im CSS Code würde das wie folgt aussehen:
Zitat:
<style typ= "text/css">
<!--
td.Wert oder p {padding:0px; oder padding:0%;}
-->
</style>


Innenabstand in der Tabelle mit padding
Zitat:
<table border="1">
<tr>
<td style="padding:30px"> Irgendein Inhalt </td>
</tr>
</table>
border, legt die Ränder breite fest

CSS Außenabstände
Außenabstände werden zwischen dem Rand eines Elements (der Box) und anderen Elementen,
bzw. dem übergeordneten Element. Außenabstände sind immer transparent.
Der Abstand wirkt sich also nicht auf die Hintergrundfarbe aus.
Es gibt auch hier die zwei Wege, wie oben genannt, einem Element den gewünschten Abstand zuzuweisen.

Auch hier kann man für alle vier Seiten verschiedene Angaben machen
margin-bottom Außenabstand unten
margin-left Außenabstand links
margin-right Außenabstand rechts
margin-top Außenabstand oben

Besonders bei margin ist das man den Wert auf auto setzen kann. Auto weist den Browser an, den Wert automatisch zu berechnen.
Das heißt, wenn man zum Beispiel margin: 0 auto; verwendet, wird das Element horizontal zentriert.

Im CSS Code würde das wie folgt aussehen:
Zitat:
<style typ= "text/css">
<!--
td.Wert oder p {margin:0px; oder margin:0%; oder margin: 0 auto;}
-->
</style>


Ich hoffe ich kann mit diesem Tutorial vielen weiterhelfen Very Happy
Mfg Yevgen
______________
.:!!! Denk Immer Positiv !!!:.


Zuletzt bearbeitet von stabest am 31.07.2010, 00:32, insgesamt 3-mal bearbeitet
Beitrag30.07.2010 um 09:10 (UTC)    
Titel:

Kleine Ergänzung:

Man kann alle Abstände auch einzeln definieren und dafür trotzdem
nur einen CSS Tag verwenden. Dafür muss man padding oder margin
durch 4 Werte ergänzen, das sieht dann so aus:

Zitat:
margin: 0px 0px 0px 0px;
margin: 0% 0% 0% 0%;

padding: 0px 0px 0px 0px;
padding: 0% 0% 0% 0%;

Nun muss man wissen, welcher Wert zu welchem Abstand gehört.
Dafür habe ich mal ein Farben hinterlegtes Beispiel gemacht:

Zitat:
margin: 0px 0px 0px 0px;
margin: 0% 0% 0% 0%;

Rot: Abstand von oben
Grün: Abstand von rechts
Blau: Abstand von unten
Violett: Abstand von links


Diese Werte lassen sich auf den Innenabstand (padding) übertragen,
es sind auch dort die Folgenden:

Zitat:
padding: 0px 0px 0px 0px;
padding: 0% 0% 0% 0%;

Rot: Innenabstand von oben
Grün: Innenabstand von rechts
Blau: Innenabstand von unten
Violett: Ínnenabstand von links


So spricht man jeden Wert einzeln, in einer Zeile an. Mit dieser
Methode kann man auch noch einiges an Platz sparen, wenn man
viele unterschiedliche Werte verwenden will. Für gleiche Werte bei
allen 4, benutzt man am besten wie oben gezeigt:

Zitat:
margin: 0px;
margin: 0%;

padding: 0px;
padding: 0%;

Bei dieser Methode spricht dieser eine Wert alle Werte gleichzeitig an,
wodurch alle Werte automatisch gleich sind.


Zuletzt bearbeitet von websock am 30.07.2010, 10:18, insgesamt 3-mal bearbeitet
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de