Skip to content

Commit

Permalink
update(CSS): web/css/box-sizing
Browse files Browse the repository at this point in the history
  • Loading branch information
undead404 authored and AdriandeCita committed Sep 22, 2022
1 parent 220798f commit b2826cf
Showing 1 changed file with 2 additions and 2 deletions.
4 changes: 2 additions & 2 deletions files/uk/web/css/box-sizing/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ browser-compat: css.properties.box-sizing

`box-sizing: border-box` – усталений стиль, що браузер застосовує для елементів {{htmlelement("table")}}, {{htmlelement("select")}} та {{htmlelement("button")}}, а також до елементів {{htmlelement("input")}}, чий тип – `{{htmlelement("input/radio", "radio")}}`, `{{htmlelement("input/checkbox", "checkbox")}}`, `{{htmlelement("input/reset", "reset")}}`, `{{htmlelement("input/button", "button")}}`, `{{htmlelement("input/submit", "submit")}}`, `{{htmlelement("input/color", "color")}}` або `{{htmlelement("input/search", "search")}}`.

> **Зверніть увагу:** Часто корисно встановлювати значення `box-sizing` у `border-box` для викладання елементів. Це сильно спрощує роботу з розмірами елементів, і в загальному дає змогу уникнути низки вовчих ям, в котрі можна потрапити, розкладаючи вміст. З іншого боку, при використанні `position: relative` або `position: absolute` вживання `box-sizing: content-box` дає змогу вказувати значення позиціонування відносно вмісту, незалежно від варіації розмірів меж чи внутрішніх відступів, що іноді є бажаним.
> **Примітка:** Часто корисно встановлювати значення `box-sizing` у `border-box` для викладання елементів. Це сильно спрощує роботу з розмірами елементів, і в загальному дає змогу уникнути низки вовчих ям, в котрі можна потрапити, розкладаючи вміст. З іншого боку, при використанні `position: relative` або `position: absolute` вживання `box-sizing: content-box` дає змогу вказувати значення позиціонування відносно вмісту, незалежно від варіації розмірів меж чи внутрішніх відступів, що іноді є бажаним.
## Синтаксис

Expand Down Expand Up @@ -61,7 +61,7 @@ box-sizing: unset;

- `border-box` (рамки меж)

- : Властивості {{Cssxref("width")}} та {{Cssxref("height")}} включають вміст, внутрішні відступи та межі, але не включають зовнішніх меж. Зверніть увагу, що внутрішні відступи та межі будуть всередині рамок. Наприклад, `.box {width: 350px; border: 10px solid black;}` дає елементові рамки 350 пікселів завширшки, із зоною вмісту 330 пікселів завширшки. Рамки вмісту не можуть мати відємної розмірності, їх найменший можливий розмір – 0, тож `border-box` не може застосовуватись для зникнення елемента.
- : Властивості {{Cssxref("width")}} та {{Cssxref("height")}} включають вміст, внутрішні відступи та межі, але не включають зовнішніх меж. Зверніть увагу, що внутрішні відступи та межі будуть всередині рамок. Наприклад, `.box {width: 350px; border: 10px solid black;}` дає елементові рамки 350 пікселів завширшки, із зоною вмісту 330 пікселів завширшки. Рамки вмісту не можуть мати від'ємної розмірності, їх найменший можливий розмір – 0, тож `border-box` не може застосовуватись для зникнення елемента.

З таким значенням виміри елемента обчислюються так: _width = межі + внутрішні відступи + ширина вмісту_, а _height = межі + внутрішні відступи + висота вмісту_.

Expand Down

0 comments on commit b2826cf

Please sign in to comment.