Az elemek kiterjesztésének visszavonása a CSS-ben
Általában az előző leckékben leírt kiterjesztés káros,
és ön szeretné megszüntetni. Ehhez
a CSS-ben van egy box-sizing tulajdonság.
Ha a border-box értéket adjuk meg neki,
akkor sem a padding, sem a szegély nem
terjeszti ki a blokkot:
<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; /* margó beállítása */
border: 10px solid green; /* szegély beállítása */
box-sizing: border-box; /* kiterjesztés kikapcsolása */
}
:
Próbálja ki önállóan a leírt
box-sizing tulajdonságot.
