width
Встановлює ширину вмісту елемента. За замовчуванням ширина залежить від типу елемента: блокові займають усю доступну ширину; ширина рядково-блокових дорівнює ширині їхнього вмісту. Властивість width дає змогу явно задати бажану ширину елемента, незважаючи на його вихідну поведінку.
Якщо для елемента властивість box-sizing задано як border-box, то width визначає ширину блоку.
📄 Коротка інформація
| Значення за замовчуванням | auto |
|---|---|
| Успадковується | Ні |
Застосовується | До всіх елементів, за винятком рядкових і рядків таблиць |
| Анімується | Так |
⌨️ Синтаксис
width: <размер> | <проценты> | auto
⚙️ Значення
Як значення приймаються будь-які одиниці довжини, прийняті в CSS - наприклад, пікселі (px), дюйми (in), пункти (pt) тощо. У разі використання процентного запису ширина елемента обчислюється залежно від ширини батьківського елемента. Якщо батьківський елемент явно не вказано, то в його якості виступає вікно браузера.
| auto | Встановлює ширину, виходячи з типу і вмісту елемента. |
📋 Приклад
<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<title>width</title>
<style>
.layer1 {
width: 300px; /* Block width */
background: #fc0; /* Background color */
padding: 7px; /* Margin around text */
border: 1px solid #ccc; /* Frame parameters */
}
.layer2 {
width: 400px; /* Text block width */
}
</style>
</head>
<body>
<div class="layer1">
<p class="layer2">Lorem ipsum dolor sit amet,consectetuer
adipiscing elit,seddiem nonummy nibh euismod tincidunt ut
lacreet dolore magna aliguam erat volutpat.</p>
</div>
</body>
</html>