Arbeit mit Padding-Abständen in CSS
Angenommen, wir haben für ein Element eine Breite von
100px festgelegt. In CSS bedeutet das keineswegs,
dass das Element tatsächlich eine Breite von
100px haben wird. Die Sache ist die, dass das Hinzufügen von
padding das Element erweitert und es dadurch
größer wird als in der Eigenschaft width angegeben.
Schauen wir uns ein Beispiel an. Erstellen wir zwei
Blöcke, denen wir eine Breite von 100
Pixeln zuweisen. Gleichzeitig weisen wir dem zweiten Block
padding zu, dem ersten jedoch nicht. Infolgedessen
wird der zweite Block um die Größe des Abstands größer sein:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
width: 100px;
height: 100px;
background: #f1f1f1;
margin-bottom: 20px;
}
#elem2 {
padding: 25px; /* Abstände festlegen */
width: 100px;
height: 100px;
background: #f1f1f1;
}
:
