box-ային մոդել

Լայնության մասին խոսելիս անհրաժեշտ է նախ և առաջ խոսել box-ային մոդելի մասին։ Երբ էլեմենտին տալիս ես լայնություն, այն իրականում կարող է ավելի մեծ լինել, քան այն լայնությունը, որը տրվել է․ էլեմենտի սահմանագիծը և ներքին սահմանը կազդեն էլեմենտի չափերի վրա դրանք մեծացնելով։ Նայիր հաջորդող օրինակը, երկու էլեմենտների համար սահմանված է նույն լայնությունը, սակայն արդյունքում դրանք ունեն տարբեր չափեր։

.simple {
  width: 500px;
  margin: 20px auto;
}

.fancy {
  width: 500px;
  margin: 20px auto;
  padding: 50px;
  border-width: 10px;
}

Նախկինում մաթեմատիկան օգնում էր իրավիճակից դուրս գալ։ CSS գրողները միշտ ստեղծում էին ցանկալի չափից ավելի փոքր լայնությամբ էլեմենտներ, ցանկալի և սահմանված չափերի տարբերությունը կազմում էր ներքին տարածության արժեքը և սահմանագծի հաստությունը։

Բարեբախտաբար, մենք այլևս այդպես անելու կարիք չունենք։