Розмір коробки - CSS-хитрощі

Anonim

box-sizingВластивість в CSS управляє тим, як модель коробки обробляється для елемента вона застосовується.

.module ( box-sizing: border-box; )

Одним з найпоширеніших способів його використання є застосування до всіх елементів на сторінці, включаючи псевдоелементи:

*, *::before, *::after ( box-sizing: border-box; )

Це часто називають "універсальним розміром коробки", і це хороший спосіб працювати! (Буквальний), який widthви встановлюєте, - це ширина, яку ви отримуєте, без необхідності виконувати розумову математику та керувати складністю, яка походить від ширини, що походить від декількох властивостей. У нас навіть тут є день обізнаності щодо розміру коробки.

Цінності

  • content-box: за замовчуванням. Значення ширини та висоти стосуються лише вмісту елемента. Набивка та рамка додаються на зовнішню сторону коробки.
  • padding-box: Значення ширини та висоти застосовуються до вмісту елемента та його заповнення. Облямівка додається із зовнішньої сторони коробки. На даний момент padding-boxзначення підтримує лише Firefox .
  • border-box: Значення ширини та висоти застосовуються до вмісту, відступів та меж.
  • inherit: успадковує розмір поля батьківського елемента.

Приклад

Цей приклад зображення порівнює типовий content-box(верхній) та border-box(нижній):

Червона лінія між зображеннями відображає значення ширини елементів. Зверніть увагу, що елемент із типовим значенням box-sizing: content-box;перевищує заявлену ширину, коли відступ та рамка додаються до зовнішньої сторони вікна вмісту, тоді як елемент із box-sizing: border-box;застосованим вміщується повністю в межах оголошеної ширини.

Використання розміру коробки

Скажімо, ви встановили для елемента значення width: 100px; padding: 20px; border: 5px solid black;. За замовчуванням отримане вікно має ширину 150 пікселів. Це тому, що за замовчуванням використовується модель розміру вікна content-box, яка застосовує оголошену ширину елемента лише до його вмісту, розміщуючи відступ і рамку поза рамкою елемента. Це ефективно збільшує, скільки місця займає елемент.

Якщо ви зміните значення box-sizingна padding-box, відступ просувається всередину вікна елемента. Тоді коробка мала б ширину 110 пікселів, з 20 пікселів прокладки всередині та 10 пікселів межі зовні. Якщо ви хочете помістити відступ і межу всередину коробки, ви можете використовувати border-box. Тоді коробка повинна бути шириною 100 пікселів - 10 пікселів межі та 20 пікселів заповнення вставляються всередину коробки елемента.

Демо

Див. Порівняння значень розміру коробки за допомогою CSS-Tricks (@ css-tricks) на CodePen.

Пов’язані

  • width
  • height
  • padding
  • border

Підтримка браузера

Chrome Сафарі Firefox Опера IE Android iOS
Будь-який * † 3 * † 1 ‡ 7 * 8 * 2,1 * † Будь-який *

* padding-boxне підтримується

† для старих версій потрібен -webkitпрефікс (Chrome 1-9, Safari 3-5, Android 2.1-3.x)

‡ -mozпотрібен префікс до версії 28, без префіксу станом на 29.