Layout
Die Karte hat kein Padding
Warum
Wenn die Karte das Padding trägt, rückt sie jeden Inhalt ohne Ausnahme nach innen. Ein Bild, ein Chart oder eine Tabelle kann dann nie bis an die Kante laufen, obwohl genau das oft die richtige Darstellung wäre. Es bliebe nur der Weg über negative Margins. Die zeigen immer, dass das Padding an einem Element zu weit außen sitzt.
Liegt das Padding dagegen im Abschnitt, entscheidet jeder Abschnitt für sich: Text bekommt Abstand, ein Bild darf randlos sein, eine Tabelle darf ihre eigenen Spaltenabstände mitbringen. Der Abstand bleibt trotzdem überall gleich, weil alle Abschnitte dieselben zwei Werte nutzen.
Die Karte verliert durch die Regel nichts. Die Abschnitte können dafür frei über ihr Padding entscheiden.
Der Aufbau
Karte = flex-col · Fläche · Rand · Radius · Überlauf beschnitten · KEIN Padding · KEIN Gap
└─ Abschnitt = volle Breite bis zur Kante · trägt das Padding
└─ Inhalt = Text | Chart | Bild | Tabelle | Hinweis | Button | Kennzahl
Richtig / falsch
RICHTIG FALSCH
Padding im Abschnitt Padding auf der Karte
╔═════════════════════════╗ ╔═════════════════════════╗
║┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄║ ║ ║
║ ║ ║ ┌───────────────────┐ ║
║ Titel ║ ║ │ Titel │ ║
║ ║ ║ └───────────────────┘ ║
║┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄║ ║ ┌───────────────────┐ ║
║█████████████████████████║ ║ │███████████████████│ ║
║██ Bild bis zur Kante ███║ ║ │██ Bild eingerückt │ ║
║█████████████████████████║ ║ └───────────────────┘ ║
╚═════════════════════════╝ ╚═════════════════════════╝
Abschnitt berührt die Kante. Karte drückt alles nach innen.
Randloses Bild möglich. Randloses Bild unmöglich.
Wann ein Abschnitt randlos läuft
Randlos ist für Inhalt, der bis an seine eigene Kante Farbe trägt: Bild, Chart, Tabelle, Heatmap, Landkarte, Video. Solcher Inhalt bringt seine Begrenzung selbst mit. Setzt Du ihn zusätzlich in einen Rahmen aus Hintergrundfläche, stehen zwei Kanten dicht nebeneinander, und keine der beiden wirkt gewollt. Läuft er bis an die Kante, ist die Kante der Karte sein Rahmen.
Nicht randlos läuft Inhalt, der seinen Weißraum schon mitbringt: ein freigestelltes Logo, eine Illustration auf hellem Grund, Text. Der braucht das Padding des Abschnitts.
Damit die Ecke dabei sauber bleibt, muss die Karte ihren Überlauf beschneiden. Läuft ein Bild bis zur Kante und die Ecke ist trotzdem eckig, fehlt dieser Beschnitt.
Padding-Werte im Abschnitt
Das erste Kind ist das, was oben steht. Hat die Karte einen Kopf, ist es der Kopf. Hat sie keinen, ist es der Inhalt, und der bekommt oben Padding. Setz die Null deshalb an den Fall „Abschnitt folgt auf Abschnitt“ und nicht an eine bestimmte Art von Abschnitt. Dann stimmt die Regel ohne Fallunterscheidung. Die weiteren Abschnitte bekommen oben kein Padding, weil der untere Abstand des Vorgängers den Abstand schon liefert. Sobald es Trennlinien gibt, bekommt jeder Abschnitt oben und unten Padding, sonst klebt der Inhalt an der Linie.
| Fall | oben | rechts | unten | links |
|---|---|---|---|---|
| Erstes Kind, ohne Trennlinie | 14 | 16 | 14 | 16 |
| Weitere Kinder, ohne Trennlinie | 0 | 16 | 14 | 16 |
| Alle Kinder, mit Trennlinie | 14 | 16 | 14 | 16 |
| Randloser Abschnitt | 0 | 0 | 0 | 0 |
Hart und weich
| Status | |
|---|---|
| Die Karte trägt kein Padding und kein Gap | hart |
| Das Padding sitzt im Abschnitt, randlose Abschnitte dürfen null setzen | hart |
| Zwei Werte für die ganze Karte, senkrecht kleiner als waagerecht | hart |
| Die konkreten Zahlen | weich, Vorgabe 14 senkrecht, 16 waagerecht |
Warum senkrecht kleiner: Senkrechtes Padding wird optisch ausgeglichen.
Woran Du den Verstoß erkennst
- Die Karte selbst trägt Padding oder ein Gap.
- Ein Abschnitt setzt sein Padding mit negativen Margins wieder zurück. Das zeigt sicher, dass das Padding an einem Element zu weit außen sitzt.
- Ein Bild in einer Karte hat links und rechts denselben Abstand wie der Fließtext darüber, obwohl es bis an die Kante gehört.
- Ein Chart läuft bis zur Kante, aber die Ecke ist eckig.
- Der Inhalt einer Karte ohne Kopf klebt an der Oberkante.
- Die Null für das obere Padding hängt an einem Abschnittstyp statt an seiner Position.
Grenzen
Keine. Auch eine Karte, die nur einen Textblock enthält, bekommt kein Padding. Sonst ist die Ausnahme nach dem dritten Einsatz die Regel, und beim nächsten Mal steht wieder ein Padding auf der Karte.