Innenabstand (padding) ist der Abstand zwischen dem Inhalt eines Elements und seinem Elementrand. Inhalt kann in diesem Fall alles mögliche sein z.B. Text, Bilder Videos usw.
| Eigenschaft | Bedeutung | Wertzuweisung |
| padding-top | Innenabstand oben | Längenangabe, Prozentangabe, initial, inherit |
| padding-right | Innenabstand rechts | Längenangabe, Prozentangabe, initial, inherit |
| padding-bottom | Innenabstand unten | Längenangabe, Prozentangabe, initial, inherit |
| padding-left | Innenabstand links | Längenangabe, Prozentangabe, initial, inherit |
| padding | Zusammenfassung | padding-top padding-right padding-bottom padding-left |
| padding-block | Innenabstand oben und unten | Längenangabe, Prozentangabe, initial, inherit |
| padding-inline | Innenabstand links und rechts | Längenangabe, Prozentangabe, initial, inherit |
| padding-block-start | Innenabstand oben | Längenangabe, Prozentangabe, initial, inherit |
| padding-block-end | Innenabstand unten | Längenangabe, Prozentangabe, initial, inherit |
| padding-inline-start | Innenabstand links | Längenangabe, Prozentangabe, initial, inherit |
| padding-inline-end | Innenabstand rechts | Längenangabe, Prozentangabe, initial, inherit |
Mit den Eigenschaften padding-top, padding-right, padding-bottom und padding-left definieren sie Innenabstände oben, rechts, unten und lins, padding-Attribute sind nicht vererbbar.
p { padding-top: 10px; padding-right: 15px; padding-bottom: 10px; padding-left: 15px; }
Mit der padding-Eigenschaften können sie alle vier Innenabstände in einem Attribut festlegen. padding kann ein, zwei, drei oder vier Attributwerte zugewiesen bekommen. Achtung auf die Reihenfolge.
p { padding: 10px; }
Außenabstand (padding) ist der Abstand zwischen dem aktuellen Element und seinem Eltern- bzw. seinen Nachbarelementen.
| Eigenschaft | Bedeutung | Wertzuweisung |
| margin-top | Außenabstand oben | Längenangabe, Prozentangabe, auto, initial, inherit |
| margin-right | Außenabstand rechts | Längenangabe, Prozentangabe, auto, initial, inherit |
| margin-bottom | Außenabstand unten | Längenangabe, Prozentangabe, auto, initial, inherit |
| margin-left | Außenabstand links | Längenangabe, Prozentangabe, auto, initial, inherit |
| margin | Außenabstand | margin-top margin-right margin-bottom margin-left |
| margin-block | Außenabstand oben und unten | Längenangabe, Prozentangabe, initial, inherit |
| margin-inline | Außenabstand links und rechts | Längenangabe, Prozentangabe, initial, inherit |
| margin-block-start | Außenabstand oben | Längenangabe, Prozentangabe, initial, inherit |
| margin-block-end | Außenabstand unten | Längenangabe, Prozentangabe, initial, inherit |
| margin-inline-start | Außenabstand links | Längenangabe, Prozentangabe, initial, inherit |
| margin-inline-end | Außenabstand rechts | Längenangabe, Prozentangabe, initial, inherit |
Mit den Eigenschaften margin-top, margin-right, margin-bottom und margin-left definieren sie Außenabstände oben, rechts, unten und lins, margin-Attribute sind nicht vererbbar.
p { margin-top: 10px margin-right: 15px margin-bottom: 10px margin-left: 15px }
Mit der margin-Eigenschaften können sie alle vier Außenabstände in einem Attribut festlegen. margin kann ein, zwei, drei oder vier Attributwerte zugewiesen bekommen. Achtung auf die Reihenfolge.
p { margin: 10px auto; }
Breite und Höhe eines Block-Elements passen sich standardmäßig automatisch an den Inhalt an. Sollte der Platz im Browser zu klein sein, blendet dieser einen Scrollbalken ein. Inline-Elemente können eine Breite haben, Höhen werden mit line-height geschrieben. Mit dem Attribut overflow können sie weitere Einstellungen machen. Mit den Attributen width und height können sie benutzerdefinierte Abmessungen erstellen.
| Eigenschaft | Bedeutung | Wertzuweisung |
| height | Höhe | auto, Längenangabe, Prozentangabe, initial, inherit |
| width | Breite | auto, Längenangabe, Prozentangabe, initial, inherit |
| max-height | Maximale Höhe | none, Längenangabe, Prozentangabe, initial, inherit |
| max-width | Maximale Breite | none, Längenangabe, Prozentangabe, initial, inherit |
| min-height | Minimale Höhe | Längenangabe, Prozentangabe, initial, inherit |
| min-width | Minimale Breite | Längenangabe, Prozentangabe, initial, inherit |
Die benutzerdefinierte Höhe von Block-Elementen, Bilder Videos usw. werden mit der height-Eigenschaft geschrieben, height ist nicht vererbbar.
p { height: 5em; }
Die benutzerdefinierte Breite von Container-Boxen, Bilder Videos usw. werden mit der width-Eigenschaft geschrieben, width ist nicht vererbbar.
p { width: 60%; }
Mit max-width, max-height teilen sie dem Browser die maximale Höhe und Breite mit, max-width und max-height sind nicht vererbbar.
p { max-width: 60%; max-height: none; }
Mit min-width, min-height teilen sie dem Browser die maximale Höhe und Breite mit, min-width und min-height sind nicht vererbbar.
p { min-width: 200px; min-height: 200px; }
In CSS sind min und max keine eigenständigen Attribute, sondern Präfixe für verschiedene Eigenschaften, die die Mindest- bzw. Höchstwerte festlegen,
width: min(300px, 50%); /* Die Breite beträgt mindestens 300px oder 50% des Container-Elements, je nachdem, welcher Wert kleiner ist. */ width: max(300px, 50%); /* Die Breite beträgt maximal 300px oder 50% des Container-Elements, je nachdem, welcher Wert größer ist. */ width: clamp(200px, 50%, 500px); /* Die Breite beträgt mindestens 200px, höchstens 50% des Container-Elements oder maximal 500px, je nachdem, welcher Wert zwischen diesen Grenzen liegt. */
Wenn der Bereich einer Box nicht ausreicht um den Inhalt darzustellen, werden normalerweise Scrolleisten eingeblendet. Mit der overflow-Eigenschaft stehen weitere Einstellungen zur verfügung.
| Eigenschaft | Bedeutung | Wertzuweisung |
| overflow | steuert übergroße Inhalte in Breite und Höhe | visible, hidden, scroll, auto, initial, inherit |
| overflow-x | steuert übergroße Breite | visible, hidden, scroll, auto, initial, inherit |
| overflow-y | steuert übergroße Höhe | visible, hidden, scroll, auto, initial, inherit |
Mit dem overflow-Attribut steuern sie das Verhalten von übergroßen Inhalt. Der Inhalt kann beschnitten, scrollbar oder sichtbar sein.
div {
width: 200px;
height: 200px;
overflow: hidden;
}
Mit dem overflow-x Attribut steuern sie das Verhalten von übergroßen Inhalt in der Breite. Der Inhalt kann beschnitten, scrollbar oder sichtbar sein.
div {
width: 200px;
overflow-x: scroll;
}
Mit dem overflow-y Attribut steuern sie das Verhalten von übergroßen Inhalt in der Höhe. Der Inhalt kann beschnitten, scrollbar oder sichtbar sein.
div {
height: 200px;
overflow-y: auto;
}