Aufhebung der Elementerweiterung in CSS
In der Regel ist die in den vorherigen Lektionen beschriebene Erweiterung schädlich
und Sie möchten sie loswerden. Dafür
gibt es in CSS die Eigenschaft box-sizing.
Wenn Sie ihr den Wert border-box zuweisen,
dann werden weder padding noch Rahmen den
Block erweitern:
<div id="elem1"></div>
<div id="elem2"></div>
#elem1 {
width: 100px;
height: 100px;
background: #f1f1f1;
margin-bottom: 20px;
}
#elem2 {
width: 100px;
height: 100px;
background: #f1f1f1;
padding: 25px; /* Innenabstände setzen */
border: 10px solid green; /* Rahmen setzen */
box-sizing: border-box; /* Erweiterung entfernen */
}
:
Probieren Sie die beschriebene Eigenschaft
box-sizing selbständig aus.
