Властивість width, ширина елемента

Ми змінили тип у , і його вміст автоматично вишикувався в дві колонки. Але зараз вони виглядають неакуратно, а розміри їх не відповідають макету. Розберемо, як це виправити.

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

Через ці особливості сітковим флекс-елементам краще завжди явно прописувати ширину. Для цього найпростіше використовувати властивість width:

За замовчуванням властивість width задає ширину вмісту боксу (content) і не враховує внутрішні відступи та ширину рамки.

У цьому випадку повна ширина боксу виявиться 160px, тому що ширина вмісту складеться з шириною відступів і рамок: 100px + 20px + 30px + 5px + 5px (рамка праворуч і ліворуч).

Цю поведінку width можна змінити. Про те, як це зробити, ми поговоримо в одній із наступних частин.

Щоб вміст колонок не прилипав до боків боксів, слід додати їм внутрішні відступи. Властивість padding працює для флекс-елементів так само, як для блокових боксів.

Задамо колонкам (розділу з класом bio та розділу з класом photo) фіксовану ширину та внутрішні відступи.

Висоту боксу можна задати за допомогою властивості height. Але зазвичай для сіткових елементів її не вказують.

Інший спосіб задати розміри флекс-елементу – використовувати властивість flex-basis. Про нього докладно розказано у цьому завданні.

CSS властивість width

CSS властивість width встановлює ширину елемента. Ширина не включає padding, border або margin.

Властивість width застосовується до всіх елементів, крім незамінних або малих елементів, рядків та груп рядків таблиці (тобто , і).

Властивість вказується одиницями виміру довжини (px, pt, em тощо), відсотками чи ключовим словом auto.

Властивість width може бути перевизначено властивостями min-width та max-width.

Негативні значення довжини неприпустимі.

Багато значень властивості width , додані в специфікацію CSS3, досі є експериментальними.

Синтаксис

width: auto | lenght | initial | inherit;

приклад

html>
html>
head>
title>Заголовок документа title>
style>
div
< width: 50%; background-color: #1c87c9; > style> head>
body>
h2>Приклад властивості width h2>
div>Lorem Ipsum - це текст-"риба", що часто використовується в пресі та веб-дизайні. Lorem Ipsum є стандартною "рибою" для текстів на латиниці з початку XVI ст. div> body> html>

У цьому прикладі ширина тексту дорівнює 50%.

У наступному прикладі ширина першого елемента дорівнює 250px, а ширина другого вказана як 25em:

приклад

html>
html>
head>
title>Заголовок документа title>
style>
div.t1
< width: 250px; border: 1px solid black;  background-color: #1c87c9; >
div.t2
< width: 25em; border: 1px solid black;  background-color: #8ebf42; > style> head>
body>
h2>Приклад властивості width h2>
h3>width: 250px h3>
div
class="t1"> Lorem Ipsum - це текст-"риба", що часто використовується в пресі та веб-дизайні. Lorem Ipsum є стандартною "рибою" для текстів на латиниці з початку XVI ст. На той час якийсь безіменний друкар створив велику колекцію розмірів і форм шрифтів, використовуючи Lorem Ipsum для друку зразків.Lorem Ipsum не лише успішно пережив без помітних змін п'ять століть, а й переступив до електронного дизайну. Його популяризації в новий час послужили публікація листів Letraset із зразками Lorem Ipsum у 60-х роках і, у нещодавні часи, програми електронної верстки типу Aldus PageMaker, у шаблонах яких використовується Lorem Ipsum. div>
h3>width: 25em h3>
div
class="t2"> Lorem Ipsum - це текст-"риба", що часто використовується в пресі та веб-дизайні. Lorem Ipsum є стандартною "рибою" для текстів на латиниці з початку XVI ст. На той час якийсь безіменний друкар створив велику колекцію розмірів і форм шрифтів, використовуючи Lorem Ipsum для друку зразків. Lorem Ipsum не лише успішно пережив без помітних змін п'ять століть, а й переступив до електронного дизайну. Його популяризації в новий час послужили публікація листів Letraset із зразками Lorem Ipsum у 60-х роках і, у нещодавні часи, програми електронної верстки типу Aldus PageMaker, у шаблонах яких використовується Lorem Ipsum. div> body> html>

Значення

width¶

Властивість width встановлює ширину блокових або замінних елементів (до них, наприклад, відноситься).

Ширина не включає товщину меж навколо елемента, значення відступів та полів.

Браузери неоднаково працюють із шириною, результат відображення залежить від використовуваного .

Демо¶

Синтаксис¶

Значення¶

В якості значень приймаються будь-які одиниці довжини, прийняті CSS — наприклад, пікселі (px), дюйми (in), пункти (pt) та інших. При використанні відсоткового запису ширина елемента обчислюється залежно від ширини батьківського елемента. Якщо батько явно не вказаний, то як його виступає вікно браузера.

Встановлює ширину на основі типу та вмісту елемента.

Значення за замовчуванням: auto

Застосовується до блокових елементів, осередків таблиці, елементів, що замінюються.

Специфікації¶