CSS: Unterschied zwischen den Versionen
Zur Navigation springen
Zur Suche springen
| Zeile 2: | Zeile 2: | ||
== box-sizing == | == box-sizing == | ||
box-sizing: border-box; | box-sizing: border-box; | ||
| − | + | Die Werte von <tt>border</tt> und <tt>padding</tt> werden nicht addiert zu <tt>height</tt> and <tt>width</tt> eines Elements | |
: Anwendung besonders wichtig bei Formularen | : 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. | ||
Version vom 5. September 2021, 12:29 Uhr
box-sizing
box-sizing: border-box;
Die Werte von border und 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; }