Տարրերի ընդլայնման չեղարկումը CSS-ում
Որպես կանոն, նախորդ դասերում նկարագրված ընդլայնումը վնասակար է
և դուք ցանկանում եք ազատվել դրանից: Դրա համար
CSS-ում կա box-sizing հատկությունը:
Եթե նշանակեք դրան border-box արժեքը,
ապա ոչ padding-ը, ոչ էլ սահմանը չեն
ընդլայնի բլոկը:
<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; /* նշանակում ենք ներսի բացատներ */
border: 10px solid green; /* նշանակում ենք սահման */
box-sizing: border-box; /* հեռացնում ենք ընդլայնումը */
}
:
Ինքնուրույն փորձարկեք նկարագրված box-sizing
հատկությունը:
