loader

Cвойство box-sizing определяет, как рассчитываются ширина и высота элемента: должны ли они включать отступы и границы или нет. По умолчанию ширина и высота, применяется только для контента элемента. Если у элемента есть граница или внутренний отступ, то они добавляются к ширине и высоте, чтобы получить отображаемый на экране размер. Если указываешь width, height и padding, то браузер посчитает размер элемента как width + padding * 2 и height + padding * 2.

box-sizing հատկությունը որոշում է, թե ինչպես են հաշվարկվում տարրի լայնությունը և բարձրությունը. արդյոք դրանք պետք է ներառեն padding և եզրագծեր, թե ոչ: Որպես ստանդարտ լայնությունը և բարձրությունը կիրառվում է միայն տարրի content-i վրա: Եթե ​​տարրն ունի եզրագիծ կամ padding, դրանք ավելացվում են լայնության և բարձրության վրա՝ էկրանի չափը ստանալու համար: Եթե ​​նշեք width, height և padding, ապա բռաուզերը կհաշվարկի տարրի չափը որպես width + padding * 2 և height + padding * 2:

Синтаксис

Գրելաձև
box-sizing: content-box; ⟿ Основывается на width и height и не включают в себя значения margin, padding и border.
box-sizing: border-box; ⟿ Основывается на width и height и включают в себя значения padding и border, но не margin. box-sizing: content-box; ⟿ Հիմնված է width և height վրա և չեն ներառում margin, padding և border արժեքները.
box-sizing: border-box; ⟿ Հիմնված է width և height վրա և ներառում է padding և border արժեքները, բայց ոչ margin.

Пример

Օրինակ

See the Pen box-sizing by Erik Egnatosyan (@SansaciaCodenyx) on CodePen.

⇓Результат данного примера показан на рисунке⇓

⇓Այս օրինակի արդյունքը ցույց է տրված նկարում⇓

 box-sizing image
Поддержка браузера дляԲրաուզերի աջակցությունը box-sizing элемента տարրին
Browser IE Edge Chrome Firefox Safari Opera
Version 8+ 12+ 10+ 29+ 5.1+ 10+
Notes