CSS: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
K (1 Version importiert) |
|||
| Zeile 1: | Zeile 1: | ||
| + | == box-sizing == | ||
| + | box-sizing: border-box; | ||
| + | Border un Padding werden nicht addiert zu <tt>height</tt> and <tt>width</tt> eines Elements | ||
| + | : Anwendung besonders wichtig bei Formularen | ||
== Collapsing margins == | == Collapsing margins == | ||
| − | |||
Wenn untere und obere Abstände von Blöcken unmittelbar aufeinander folgen, werden sie zu '''einem''' Abstand verschmolzen. | Wenn untere und obere Abstände von Blöcken unmittelbar aufeinander folgen, werden sie zu '''einem''' Abstand verschmolzen. | ||
Dieses Verhalten kann verhindert werden: | Dieses Verhalten kann verhindert werden: | ||
Version vom 5. September 2021, 12:28 Uhr
box-sizing
box-sizing: border-box;
Border un Padding werden nicht addiert zu height and width eines Elements
- Anwendung besonders wichtig bei Formularen
Collapsing margins
Wenn untere und obere Abstände von Blöcken unmittelbar aufeinander folgen, werden sie zu einem Abstand verschmolzen. Dieses Verhalten kann verhindert werden:
- Einen eventuell unsichtbaren Rahmens um einen Bereich setzen ...
<div style="background: #FFFFCC; border: solid #FFF 1px;">
- ... oder durch Verwenden von padding
<div style="background: #FFFFCC; padding: 1px;">
Durch diese Workarounds wird der obere Rand von nachfolgenden Elementen nicht verschluckt.
Man könnte für alle div Elemente einen solchen Rahmen formatieren, dann wäre das Problem möglicherweise generell behoben.
.div { border: solid #FFF 1px; }