div#box {
width: 100px;
padding: 20px; /* je 20px links und rechts /
border: 2px solid; / je 2px links und rechts /
margin: 0 30px; / je 30px links und rechts */
}
• 100 Pixel
• 2 Mal 20 Pixel
• 2 Mal 2 Pixel
• 2 Mal 30 Pixel
Das ergibt eine Gesamtbreite des Elements von 204 Pixel.
Ein Beispiel:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
div#box {
border: 1px solid; /* je 2px links und rechts */
margin: 0 30px; /* je 30px links und rechts */
background-color:#6600CC;
}
</style>
</head>
<body>
<div id="box">PSD-Tutorials.de</div>
</body>
</html>
Alles auf Null
* { padding: 0; margin: 0; }
Fügt diese Zeile an den Anfang eures Stylesheets ein. Auf diese Weise könnt ihr nun beginnen, die Boxen an den gewünschten Stellen zu platzieren.
Boxtypen
<h1>Digital Painting & Matte Painting: Bildaufbau definieren</h1> <p>Modul 2 - Teil 2: Ein Bild ist immer ein Ganzes. Jedoch muss man sich immer überlegen, wo der Betrachter als Erstes hinsehen sollte.</p>
<h1><em>Digital Painting & Matte Painting</em>: Bildaufbau definieren</h1> <p>Modul 2 - Teil zwei: <strong>Ein Bild ist immer ein Ganzes</strong>. Jedoch muss man sich immer überlegen, wo der Betrachter als Erstes hinsehen sollte.</p>
Und auch hier ein Blick auf das Ergebnis:
Ihr könnt nun aus Elementen, die eigentlich Blockelemente sind, Inline-Elemente machen.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
h1 {
background-color:#00CCFF;
}
</style>
</head>
<body>
<h1>Digital Painting & Matte Painting</h1>
<p>Modul 2 - Teil 2: <em>Ein Bild ist immer ein Ganzes</em>. Jedoch muss man sich immer überlegen, wo der Betrachter als Erstes hinsehen sollte.</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>PSD-Tutorials.de</title>
<style>
h1 {
display:inline;
background-color:#00CCFF;
}
</style>
</head>
<body>
<h1>Digital Painting & Matte Painting</h1>
<p>Modul 2 - Teil 2: <em>Ein Bild ist immer ein Ganzes</em>. Jedoch muss man sich immer überlegen, wo der Betrachter als Erstes hinsehen sollte.</p>
</body>
</html>
