Пошук уроків, статей та іншого контенту
Навчіться задавати ширину й висоту елементів, а також працювати з мінімальними та максимальними розмірами.
width і heightВластивості width і height задають ширину та висоту HTML-елементів.
.card {
width: 300px;
height: 200px;
}У цьому прикладі елемент із класом card матиме ширину 300px і висоту 200px.
<div class="card">Вміст картки</div>widthВластивість width задає ширину елемента.
.box {
width: 400px;
}Ширину можна вказувати за допомогою різних одиниць вимірювання:
px — пікселі;
% — відсоток від ширини батьківського елемента;
vw — відсоток від ширини вікна браузера;
auto — автоматичне значення.
Пікселі задають фіксований розмір:
.container {
width: 500px;
}Елемент матиме ширину 500 пікселів незалежно від ширини батьківського елемента. Якщо екран буде вузьким, такий елемент може не поміститися в ньому.
Відсоткова ширина залежить від батьківського елемента:
<div class="parent">
<div class="child">Дочірній елемент</div>
</div>.parent {
width: 600px;
}
.child {
width: 50%;
}Ширина .child становитиме 50% від ширини .parent, тобто 300px.
Значення auto дозволяє браузеру самостійно визначити ширину елемента.
.block {
width: auto;
}Для блочних елементів, таких як div, ширина auto зазвичай означає, що елемент займає доступну ширину батьківського контейнера.
heightВластивість height задає висоту елемента.
.box {
height: 150px;
}Якщо вміст елемента не поміщається у встановлену висоту, він може вийти за межі елемента.
<div class="description">
Це довгий текст, який може не поміститися у фіксовану висоту елемента.
</div>.description {
height: 40px;
}Фіксована висота не збільшується автоматично через додатковий текст. Тому для блоків із непередбачуваною кількістю вмісту часто краще не задавати height, а використовувати min-height.
Для height можна використовувати ті самі одиниці:
px — фіксована висота;
% — відсоток від висоти батьківського елемента;
vh — відсоток від висоти вікна браузера;
auto — висота відповідно до вмісту.
.banner {
height: 50vh;
}Значення 50vh означає половину висоти вікна браузера. Якщо висота вікна становить 800px, висота елемента буде 400px.
min-widthВластивість min-width задає мінімально допустиму ширину елемента.
.button {
min-width: 120px;
}Навіть якщо текст кнопки короткий, її ширина не буде меншою за 120px.
min-heightВластивість min-height задає мінімально допустиму висоту.
.card {
min-height: 200px;
}Елемент матиме висоту щонайменше 200px. Якщо вміст потребує більше місця, елемент зможе збільшитися.
Це зручно для блоків, у яких кількість тексту може змінюватися:
.article {
min-height: 250px;
padding: 20px;
}На відміну від height, властивість min-height не обмежує елемент жорстко.
max-widthВластивість max-width задає максимальну ширину елемента.
.content {
width: 100%;
max-width: 900px;
}Елемент займатиме всю доступну ширину, але не стане ширшим за 900px.
Це поширений спосіб зробити контейнер зручним для різних екранів:
.container {
width: 90%;
max-width: 1000px;
}На широкому екрані контейнер не перевищить 1000px, а на вузькому займатиме 90% доступного простору.
max-heightВластивість max-height задає максимальну висоту елемента.
.preview {
max-height: 300px;
}Якщо вміст стає вищим за 300px, елемент не збільшується понад це значення. Частину вмісту можна приховати або зробити прокручуваною за допомогою overflow.
.preview {
max-height: 300px;
overflow: auto;
}Властивість overflow: auto додає смуги прокручування лише тоді, коли вміст не поміщається.
Можна одночасно задати ширину, мінімальну та максимальну ширину:
.container {
width: 90%;
min-width: 280px;
max-width: 1000px;
}У цьому випадку:
ширина зазвичай становитиме 90%;
вона не буде меншою за 280px;
вона не буде більшою за 1000px.
Так само можна керувати висотою:
.panel {
height: 50vh;
min-height: 300px;
max-height: 600px;
}Фактична висота буде:
не меншою за 300px;
не більшою за 600px;
приблизно 50% висоти вікна браузера, якщо це значення потрапляє в дозволений діапазон.
За замовчуванням width і height задають розмір області вмісту елемента. Внутрішні відступи padding і рамка border додаються до цього розміру.
.box {
width: 200px;
padding: 20px;
border: 5px solid black;
}Фактична ширина такого елемента буде:
200px — ширина вмісту;
40px — лівий і правий padding;
10px — ліва і права рамка.
Разом: 250px.
Щоб width включала вміст, внутрішні відступи та рамку, використовують box-sizing: border-box.
.box {
width: 200px;
padding: 20px;
border: 5px solid black;
box-sizing: border-box;
}Тепер загальна ширина елемента буде 200px.
У навчальних і реальних проєктах часто використовують таке правило:
* {
box-sizing: border-box;
}Воно застосовує border-box до всіх елементів сторінки.
У наступному прикладі створено контейнер, який адаптується до ширини екрана, але має мінімальну та максимальну ширину.
<!DOCTYPE html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Width і Height</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, sans-serif;
background-color: #f2f2f2;
}
.container {
width: 90%;
max-width: 800px;
min-height: 300px;
margin: 40px auto;
padding: 30px;
background-color: white;
border: 2px solid #333;
}
.image-placeholder {
width: 100%;
height: 180px;
background-color: #d9eaf7;
text-align: center;
line-height: 180px;
}
</style>
</head>
<body>
<main class="container">
<h1>Інформаційний блок</h1>
<div class="image-placeholder">
Область зображення
</div>
<p>
Контейнер займає 90% доступної ширини, але не може бути ширшим
за 800 пікселів. Його мінімальна висота становить 300 пікселів.
</p>
</main>
</body>
</html>У цьому прикладі:
.container займає 90% ширини батьківського елемента;
max-width: 800px обмежує його максимальну ширину;
min-height: 300px задає мінімальну висоту;
.image-placeholder має ширину 100% контейнера;
box-sizing: border-box допомагає враховувати padding і border у загальному розмірі.
.card {
height: 100px;
}Якщо тексту стане більше, він може вийти за межі картки. Для таких випадків краще використати:
.card {
min-height: 100px;
}.child {
height: 50%;
}Відсоткова висота залежить від висоти батьківського елемента. Якщо висота батьківського елемента не визначена, браузер може не застосувати таке значення очікуваним способом.
.container {
width: 1200px;
}Такий контейнер може не поміститися на вузькому екрані. Часто безпечніше поєднувати відсоткову ширину з max-width:
.container {
width: 90%;
max-width: 1200px;
}padding і borderЯкщо елемент має фіксовану ширину та внутрішні відступи, його фактичний розмір може виявитися більшим за очікуваний. Для передбачуваного розміру використовуйте:
* {
box-sizing: border-box;
}width задає ширину елемента.
height задає його висоту.
min-width і min-height визначають мінімальні розміри.
max-width і max-height визначають максимальні розміри.
Відсоткові розміри залежать від батьківського елемента.
vw залежить від ширини вікна браузера, а vh — від його висоти.
min-height часто безпечніша за фіксовану height для блоків із текстом.
Поєднання width: 90% і max-width допомагає створювати елементи, які добре пристосовуються до різних екранів.
box-sizing: border-box включає padding і border у вказані ширину та висоту.