У таблиці стилів браузера для кожного елемента встановлений його тип - властивість display. Поведінка елемента визначається його типом. Найпоширеніші типи - це блокові (block) і рядкові (inline) елементи. Крім цього, існує певна кількість додаткових типів, наприклад рядково-блокові (Inline-block) елементи.
- Рядкові елементи призначені для виділення і оформлення текстового контенту. Наприклад посилання, кнопка, зображення тощо.
- Блокові використовуються для розмітки текстових контейнерів (заголовок, список, абзац) і великих смислових розділів (секція, шапка, підвал).
- Дізнатися тип будь-якого елемента можна в довіднику
See the Pen Блокові_рядкові_елементи by kravets (@raisa69) on CodePen.
У CSS створено спеціальну блокову модель (англ. box model), яка описує, з чого складається будь-який блок і від яких властивостей залежать його розміри. У цій моделі кожен блок складається із чотирьох областей:- Область вмісту (content) - це контент елемента, наприклад текст, зображення, відео або вкладені елементи. За замовчуванням висота області вмісту визначається контентом, ширина - типом елемента (блоковий або рядковий).
- Внутрішнє поле (padding) - це відстань між контентом елемента і його рамкою (border). Використовується для декоративних ефектів. Не можна встановлювати від'ємні значення.
- Рамка (border) - межа елемента, за замовчуванням її ширина дорівнює нулю. Якщо колір рамки не заданий, вона приймає колір основного вмісту, наприклад тексту.
- Зовнішній відступ (margin) - додає відступ зовні елемента, від зовнішньої межі (рамки) до сусідніх елементів, у такий спосіб розділяючи їх на сторінці. Може приймати від'ємні значення. Фон елемента ніколи не поширюється на зовнішній відступ.
Властивості width і height
Ці властивості дозволяють явно вказати загальну ширину і висоту елемента, або тільки розмір його області вмісту (контенту), все залежить від типу блокової моделі.
Кілька порад для використання цих властивостей.
- Не ставте елементам фіксовану висоту, нехай вона визначається контентом. Точно встановлена висота призводить до проблеми переповнення, коли контенту більше, ніж елемент може вмістити.
- Більшості елементів задається тільки ширина. Вказувати одночасно
widthіheightварто тільки декоративним елементам з фіксованим розміром, наприклад іконкам. - Ширину можна задавати не тільки в
px,emабоrem, але й у відсотках. У такому разі ширина блоку буде розрахована як відсоток від ширини батька. Детальніше про це при побудові сіток.
Блокові елементи
Візуально - це прямокутні області, що йдуть одна за одною зверху вниз.
- Для них задана властивість
display: block. - Вони займають всю доступну ширину рядка (простір за горизонталлю) всередині батька.
- Їх висота визначається вмістом, якщо явно не задана у властивості
height. - Вони завжди починаються з нового рядка, тому кілька сусідніх блокових елементів розташовані вертикально один під одним.
- Їм можна задавати будь-які властивості геометрії елемента: ширину, висоту, поля, рамки і відступи:
- Ширина для блокових елементів є: width + margin + padding + border (аналогічно з висотою);
Блокові елементи мають такі особливості:
- Висота блоку розраховується виходячи з вмісту блоку;
- Блокові елементи можуть містити блокові і рядкові елементи. Однак блоковий елемент P є винятком: всередині нього можуть знаходитись тільки рядкові елементи.
- Блокові елементи можуть міститися тільки в межах блокових елементів
Фіксована ширина
Навіть якщо ширина блокових елементів задана явно, вони все одно будуть розташовуватися вертикально один під одним. Все вільне місце в рядку за замовчуванням займається автоматичним правим відступом (margin-right) елемента.
See the Pen lesson-05-fixed-width-block by kravets (@raisa69) on CodePen.
Щоб подивитися на відступ елемента, необхідно використовувати інструменти розробника, візуально на сторінці вони жодним чином не виділяються.
Горизонтальне центрування блокових елементів
Блоковий елемент можна горизонтально центрувати всередині його батька, у разі, коли ширина батька більша за ширину центрованого елемента. Тобто блоковому елементу задана фіксована ширина. Для цього використовується особливість автоматичних горизонтальних відступів.
За замовчуванням у блокового елемента автоматичний правий відступ, який займає увесь вільний простір в рядку.
.box {
margin-right: auto;
}
.box {
width: 300px;
background-color: tomato;
margin-right: auto;
margin-left: auto;
}
See the Pen lesson-05-auto-margin by kravets (@raisa69) on CodePen.
Div Element
<div> є Block-level element, це один з найбільш широко використовуваних елементів, і найважливіші в документі HTML, він використовується для утримання інших елементів або бере участь у створенні лейауту (Layout) сторінки.
За умовчанням <div> створює прозору прямокутну ділянку, яку можна візуально побачити, якщо застосувати до неї CSS, наприклад: background, border
See the Pen div elements by kravets (@raisa69) on CodePen.
Рядкові елементи
Візуально розташовуються в одному рядку один за одним доти, доки в ньому вистачає місця, після чого почнуть перестрибувати на наступний рядок і заповнювати його.
Особливості рядкових елементів:
- Для них задана властивість display: inline.
- Їх ширина і висота залежать тільки від вмісту, явно задати їх не можна. Тобто властивості width і height не мають жодного ефекту.
- Вони розташовуються в рядку доти, доки в ньому є достатньо місця, після чого нові переносяться на наступний рядок. Щоб заборонити перенесення тексту всередині елемента, потрібно додати властивість white-space:nowrap;
- Їм можна задавати тільки горизонтальну геометрію: ліві і праві поля, відступи і рамки. Тобто вони ігнорують значення верхніх і нижніх margin, padding і border.
- Рядкові елементи містяться всередині блочних елементів
- До і після рядкового елемента відсутні переноси рядків.
- Розмір елемента дорівнює його вмісту + значення margin, border і padding.
Span Element
<span> є важливим Inline element і використовується найбільше в документі HTML. Він використовується для змісту інших Inline element, або текстових змістів.
<span> створює прозору ділянку, яку можна візуально побачити, якщо застосувати до неї CSS, наприклад: background, border
See the Pen span element by kravets (@raisa69) on CodePen.
ЗАВДАННЯ 1
- Додайте в CSS-правило для класу p-first властивість лівий зовнішній відступ margin-left: 50px;
- В CSS-правило для класу p-second властивість внутрішні відступи padding: 20px;
- В CSS-правило для класу p-third властивість ширини width: 50%;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Властивості розміру блоку</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Блочні елементи і CSS</h1>
<p class="p-first">Розміри і відступи за допомогою CSS можна задавати блоковим елементам. Абзац, тег & lt; p & gt;, є одним з них.</p>
<p class="p-second">Блоковим елементам можна задавати внутрішні і зовнішні відступи.</p>
<p class="p-third">Також їм можна задавати ширину і висоту.</p>
</body>
</html>
ЗАВДАННЯ 2
У CSS встановити такі властивості- Для тегів p, div, h1, h2 зовнішні відступи 20px; внутрішні відступи 10px;
- для рядкових елементів задати колір фону - жовтий
- на сторінку html в абазацах тексту додати елемент em та div (на власний розсуд)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Рядкові елементи</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Рядкові елементи</h1>
<p><em>Рядкові елементи</em> <strong>не створюють переносів</strong> <span>рядка</span> до і після себе. Такі елементи розташовуються в рядку зліва направо. Якщо <em>рядковий елемент</em> <span>не поміщається в батьківський контейнер</span>, то він переноситься на наступний рядок.</p>
</body>
</html>
ЗАВДАННЯ 3
У CSS встановити такі властивості- Для тега div зовнішній відступ 20рх, внутрішній 10рх
- Задайте елементам з класом example ширину 100px і висоту 100px, колір фону голубий
- для тега span колір фону - жовтий
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Ширина і висота</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="example">Блокові елементи за замовчуванням займають всю доступну ширину. Їх висота залежить від змісту.</div>
<div><span class="example">Розміри рядкових елементів повністю залежать від їх змісту і за допомогою CSS не змінюються. Розміри рядкових елементів повністю залежать від їх змісту і за допомогою CSS не змінюються. Розміри рядкових елементів повністю залежать від їх змісту і за допомогою CSS не змінюються</span></div>
</body>
</html>
ЗАВДАННЯ 4
- Додайте в зазначені CSS-правила властивісті для тега div: ширину 280px; висоту 20px; зовнішній відступ 20px; розмір шрифта 12px
- Додайте в зазначені CSS-правила властивість padding (внутрішні відступи):
- для класу p1 - padding: 10px;,
- для класу p2 - padding: 10px 20px;,
- для класу p3 - padding: 10px 20px 30px;3.
- Для блокових елементів задати колір фону голубий, для рядкових - жовтий
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Внутрішні відступи, властивість padding</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="p1">Блок 1</div>
<div class="p2">Блок 2</div>
<div class="p3">Блок 3</div>
<div>
<span class="p1">Текст 1</span>
<span class="p2">Текст 2</span>
<span class="p3">Текст 3</span>
</div>
</body>
</html>
Завдання 5
See the Pen div-width-task1 by kravets (@raisa69) on CodePen.
Завдання 6
Не вносячи змін в HTML, оформити список за допомогою CSS, як показано на малюнку. При наведені посилання повинні підкреслюватись.
