Як задається в css розмір блоку властивості width, height, padding

На які типи поділяються елементи

Блокові елементи мають абсолютно іншу поведінку. Без додаткових маніпуляцій вони не зможуть стати в один ряд. Приклад такого блоку - абзац, який задається тегом p. Так ось, навіщо я вам все це говорю? Це сказано для того, щоб ви розуміли - розмір потрібно задавати тільки блоковим елементам, що ми і будемо робити в цій статті.

Мал. 1. Основні властивості, які допомагають задати розмір

Прості властивості для розмірів

Найпростіші властивості, якими можна записати розміри - це width і height. Чи означають вони, відповідно, ширину і висоту. До них також можна дописувати префікси min- і max-. В такому випадку буде здаватися мінімальна і максимальна ширина або висота відповідно.

Значення можна записувати в пікселях або у відсотках. Іноді ще використовується відносна одиниця em (висота шрифту), але зазвичай з її допомогою визначається величина тексту. За замовчуванням всі сітки (головні структурні блоки шаблону), в яких розміри визначаються у відсотках, називають гумовими. Також процентна запис допомагає легко адаптувати шаблон, що теж дуже важливо.

Розмір в пікселях

В пікселях записують так звані абсолютні значення. Наприклад, весь сайт повинен знаходитися в контейнері шириною 1000 пікселів. Створюється цей блок і йому пишеться ширина.

Якщо записано так, то ширина контейнера не змінюватиметься ні в якому разі. При зміні масштабу або зменшенні вікна вона буде залишатися незмінною. Розмір сайту не зменшиться і при необхідності з'явиться горизонтальна смуга прокрутки.

І все ж уміння сітки сайту адаптуватися під нові екрани має сьогодні величезну роль, тому що мобільний трафік зростає. У зв'язку з цим останніми роками все частіше головний контейнер для каркаса сайту одержує не жорстку ширину. Наприклад, так:

І що це значить? А то, що при необхідності блок буде зменшуватися. Якщо стиснути вікно, то він теж зменшиться. У той же час, якщо дозвіл екрана дозволяє, ширина становитиме 1320 пікселів рівно. Зменшуючи вікно ви не побачите горизонтальний скрол.

Однак тут же можна задати ще і мінімальну ширину. Якщо блоку записати це властивість, то він не буде ставати вже, ніж вказане значення. наприклад:

Якщо ширина вікна стане менше 600 пікселів, то блок перестане стискатися і з'явитися та сама горизонтальна смуга прокрутки.

Розмір у відсотках

Задавати величину у відсотках стає все більш популярним. При грамотному використанні це може принести відмінне відображення сайту на різних пристроях.

В результаті сайдбар отримає 28% ширини батьківського елементу (а в нашому випадку це загальний контейнер), а основний блок - 62%. Їх загальна ширина складе 90%. Решта 10 залишимо на різні зовнішні і внутрішні відступи, рамки і т.д.

Мал. 2. Гумові блоки змінюють свої розміри при зменшенні вікна в браузері

Як впливають відступи на розміри блоків

Коли ви задаєте ширину якогось блоку за допомогою властивості width, це може бути далеко не остаточне значення. Справа в тому, що так ми визначаємо ширину тільки тієї частини, в которй безпосередньо є вміст. Потрібно пам'ятати, що в css padding збільшує розмір блоку, так само, як і рамка (border).

Припустимо, візьмемо бічну колонку. Ми дали їй 28% від всієї ширини контейнера. Але щоб вміст в сайдбарі не прилипало до країв, їм потрібно дати деякі відступи. Також, можливо, ви захочете додати боковій колонці рамочку.

Ось уже і виходить, що загальна ширина сайдбара збільшилася на 44 пікселя (відступи справа і зліва по 20 і рамка з цих же сторін по 2). Є варіант для тих, хто не хоче сильно заморочуватися над розмірами і записувати їх відразу з урахуванням відступів і рамок. Тоді потрібно записати так:

Це чудова властивість робить так, що в ширину блоку (width) починають включатися внутрішні відступи (padding) і рамки. Тепер якщо ви задасте контенту розмір в 62%, він залишиться таким в будь-якому випадку. Але ж є ще й зовнішні відступи, але вони вже на розміри блоку не впливають. Але якщо ви захочете зробити, припустимо, великий відступ праворуч від бічної колонки, то контент просто не влізе і змушений буде перенестися вниз.

гумові картинки

Щоб дати можливість в css зображенні змінюватися за розміром блоку, їй потрібно задавати ширину у відсотках. Таким чином, якщо сам блок має відносний розмір або йому прописаний max-width, то при зменшенні ширини картинка і блок будуть зменшуватися синхронно, що є добре для гарного відображення сайту.

У css багато можливостей для завдання розміру. Набагато більшу увагу при цьому приділяється ширині блоків, так як саме від цього залежить відображення шаблону. В кінці я ще хотів би вам порекомендувати такий курс. з якого ви зможете дізнатися, як правильно працювати з розмірами елементів в умовах розробки під мобільні пристрої.

Найсвіжіші новини IT і веб-розробки на нашому Telegram-каналі