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