Здрастуйте, шановні читачі блогу . Сьогодні я хочу продовжити тему вивчення CSS (каскадних таблиць стилів) і розглянути ті стильові правила, які дозволяють задати відступи та межі для Html елементів: border, margin і padding.
До цього ми встигли вивчити досить-таки прості властивості, які керували шрифтів (Font Weight, Family, Size, Style), текст (text-decoration, vertical-align, text-align) і розглянули модель формування фону в CSS через background.
Так, ще ми і принципи використання селекторів встигли розглянути у всіх подробицях (розтягнувся на кілька статей). Тепер пора переходити до правил, які становлять основу побудови документів (вебсторінок), і ми почнемо саме з блочної моделі (взаємини Html-елементів).
У загальних рисах я вже писав про блокову Div верстку та сучасну верстку сайту, ну, а сьогодні буде вже чиста конкретика. Якщо ви захочете ознайомитися з попередніми публікаціями по темі, то милості прошу в довідник.
Блокова модель в CSS — padding, margin та border
Для браузера Firefox є чудовий плагін під назвою Фаербаг, про який я вже досить давно і докладно писав.
При перегляді інформації про будь-якому Html тегу веб сторінки, цей плагін на вкладці «Макет» дозволяє побачити дуже наочне уявлення відступів і меж даного елемента відносно батьківського і тих тегів (або ж вмісту), які укладені усередині нього (матрьошка така виходить):
На цій схемі чітко видно, що для будь-якого Html-елемента в CSS можна чітко задати розміри чотирьох прямокутних областей. Всередині всієї конструкції лежить, власне, вміст цього тега (наприклад, текст або зображення), яке може в свою чергу включати в себе і інші вкладені елементи (наприклад, таблиця з комірками і їх вмістом).
Якщо починати розглядати цю матрьошку зсередини, починаючи з вмісту, то далі йде область внутрішнього відступу від цього вмісту до рамки цього тегу. Розмір області задається з допомогою CSS правила Padding, а ширину рамки можна задати за допомогою Border.
Слідуючи з центру до периферії, ми після рамки повинні будемо задати область зовнішнього відступу з допомогою Margin. Воно дозволяє регулювати взаємовідносини з кордонами інших блоками. Наприклад, з допомогою завдання негативних відступів в CSS правилі мерджин, можна домагатися накладення одних блоків веб сторінки на інші сусідні блоки цієї сторінки.
Відразу обмовлюся, що ви можете задавати Padding та Margin, а також розміри рамки Border окремо для кожної з сторін блоку (прямокутної області), які визначаються як:
Ну і для прикладу подивимося, що саме будуть позначати border, margin і padding стосовно якимось конкретним сторонам блочної моделі:
Взагалі для її розуміння потрібно перш за все зрозуміти, що будь-який Html елемент лежить всередині якоїсь області. Цю область в CSS прийнято називати контейнер, і зазвичай контейнером для блоку є область контенту його батьківського елементу.
На наведеному трохи вище скріншоті межа зовнішнього контейнера позначена чорною зовнішньої рамочкою, ну а для ув’язнених всередині батьківського елемента тегів (якщо такі мають місце бути) контейнером вже буде внутрішня область, забарвлена в жовтуватий колір. Пояснює скріншот:
Вийшло трохи заплутано, але так воно завжди буває спочатку. З часом у вас все в голові устаканиться і блокова модель прийме ясні і стрункі обриси. Інакше і бути не може.
Margin (top, bottom, left, right) — зовнішні відступи в CSS
Давайте почнемо розгляд властивостей CSS для завдання відступів і кордонів з Margin. Зрозуміло, що це правило може бути написано окремо для кожної з сторін блочної моделі і в ньому допустимо використовувати наступні значення:
Наш елемент, для якого ми прописує дане правило, взаємодіє з межами свого контейнера та з межами сусідніх блоків, які в коді розташовані поруч з ним. Відповідно, існують чотири CSS правила для кожної з наявних кордонів: margin-top,right, bottom і left. Що можна використовувати в якості значень для них?
Ну, по-перше, це чарівне Auto, яке віддає на відкуп браузеру розрахунок цих самих зовнішніх відступів. Зрозуміло, що браузери для розрахунків використовують якісь значення, і тут все далеко не тривіально. Поки відзначимо для себе, що margin Auto передбачає самостійний розрахунок цих значень браузером.
По-друге, в якості значень для margin-top, right, bottom і left можна використовувати розмірні величини Em, Ex або Px.
По-третє, можуть використовуватися відсотки. Від чого ж вони вважаються? Виявляється, що від ширини контейнера (тобто від області вмісту батьківського елемента). Причому це відноситься не тільки до margin-right і left, що було б логічно, але і для margin-top і bottom відсотки будуть розраховуватися саме від ширини (а не висоти) контейнера.
Треба відзначити, говорячи про завдання розмірних значень, що Margin може бути ще і негативним. Тобто при завданні позитивного значення для зовнішнього відступу ми відсуваємо сусідній елемент на певну відстань, а у разі зазначення негативного — сусідній блок просто-напросто заїде на той, для якого ми цей негативний відступ задали. І це дуже часто використовується в CSS.
Ну і само собою зрозуміло, що існує збірне CSS правило Margin, яке у багатьох випадках дозволяє скоротити розмір коду використовується для задання необхідних зовнішніх відступів. Порядок проходження значень у ньому суворо регламентується (вони прописуються через пробільний символ) і повинен відповідати зразку:
Тобто перерахування починається з верхнього (top) і продовжується за годинниковою стрілкою аж до завершення кола правим відступом (right). Виглядати це може приблизно так:
margin:20px 10px 40px 30px;
І це буде означати, що браузер зверху від нашого блоку повинен зробити відступ у 20 пікселів, праворуч — 10, знизу — в 40, а зліва — 30. Тобто ця запис буде еквівалентна такий:
margin-top:20px;
margin-right:10px;
margin-bottom:40px;
margin-left:30px;
Скорочення CSS коду видно неозброєним оком. Але і це ще не межа. Цілком допустимо використовувати в збірному правилі не тільки чотири, але і три, два і навіть всього одне значення. Що ще більше допоможе зменшити розмір коду. Однак, зменшувати кількість значень можна буде тільки в певних випадках:
margin:20px 30px 40px 30px;
То останнє можна буде опустити:
margin:20px 30px 40px;
Ці два записи збірного правила роблять одне і те ж. Тому, якщо ви бачите запис з трьома величинами в Margin, то величину четвертого (праворуч) можна підглянути у другому (ліворуч).
У разі рівності відступи зверху і знизу такий фокус не пройде, бо за логікою можна зменшувати структуру запису збірного правила, лише відсікаючи дублююче значення з її кінця (а значення нижнього відступу буде стояти передостаннім).
margin:20px 30px 20px 30px;
або, що те ж саме (в силу пункту 1):
margin:20px 30px 20px;
То таке збірне правило можна записати всього з двома значеннями, відкинувши останнє, яка збігається з першим:
margin:20px 30px; В цьому випадку перша величина описує зовнішні відступи по вертикалі, а друга — по горизонталі.
margin:20px 20px 20px 20px;
або, що те ж саме (в силу пункту 2):
margin:20px 20px;
То можна буде використовувати максимально скорочений тип запису (відкинувши останнє значення збігається з першим):
margin:20px; Що буде означати однаковий зовнішній відступ з усіх боків від нашого Html-елемента.
Кажучи про зовнішні відступи, варто згадати про таку схему як «Margin-colloapse» або, по іншому, «схлопування марджинов». У двох словах суть цього явища полягає в наступному.
Якщо у нас є два блоки розташовані один під одним (схлопування марджинов може відбуватися тільки по вертикалі) і для них обох задані зовнішні зустрічні відступи (наприклад, нижній для верхнього елемента і верхній відступ для нижнього), то більше значення Margin поглине в себе менше.
Наприклад, якщо для верхнього блоку задано наступне:
margin:20px 20px 200px 20px;
А для нижнього:
margin:100px 20px 20px 20px;
То нижній марджін верхнього блоку (200px) поглине в себе верхній марджін нижнього (100px, та й навіть якщо він стане дорівнює 199px нічого не зміниться) і результуючий зовнішній відступ між цими двома блоками все одно буде дорівнює 200px. Тобто в розрахунок приймається тільки більший за модулем Margin, і він ніяк не складається із зустрічним значенням сусіднього по вертикалі елемента.
Така ось заковика, яка працює виключно по вертикалі, а по горизонталі зустрічні розміри Margin будуть просто плюсоваться один до одного. Але це тільки стосовно марджинов з однаковим знаком, а от якщо вони будуть з різними знаками, то їх числа просто складуться і блоки будуть відстояти один від одного на результуючу величину.
Наприклад, в цьому випадку:
Верхній margin:20px 20px -20px 20px; Нижній margin:10px 20px 20px 20px;
Результуючий відступ між блоками дорівнює -10px, тобто нижній на 10px наїде на верхній Html елемент.
Ще однією особливістю використання правила Margin в CSS є те, що прописане значення по вертикалі для рядкових елементів ігнорується. Задавши:
margin:20px;
Наприклад, для гіперпосилання, яка є рядковим елементом, ми реально побачимо тільки відступи по горизонталі, а по вертикалі ніяких змін не відбудеться.
Забігаючи трохи вперед скажу, що Padding у рядкових тегів по вертикалі спрацює, але збільшився внутрішній відступ ніяк не позначиться на його загальному положенні щодо інших сусідніх елементів.
У разі блочного тега (заголовки, абзаци) збільшився по вертикалі Padding посунув би цей елемент щодо інших сусідніх блоків.
Ну і рамка (Border), а точніше її ширина, теж не зможе відсунути по вертикалі від рядкового тега інші сусідні блоки. Для рядкових елементів рух можливий лише в одному напрямку — по горизонталі і все.
Padding та border — внутрішні відступи та рамки
Давайте тепер перейдемо до завдання внутрішніх відступів за допомогою правила Padding і подивимося, які саме значення воно може приймати:
Як ви можете бачити, тут немає згадки Auto, а також це CSS правило не допускає використання від’ємних значень (вони можуть бути тільки позитивними — від нуля і вище). Тобто з допомогою Padding контент за межі рамки висунути ніяк не вийде. Максимум що можна зробити, це контент впритул наблизити до рамки.
Відсотки в ньому вважаються точно так само, як в Margin — щодо ширини контейнера (області вмісту батьківського елемента), в якому укладено наш елемент. Збірне правило Padding в Css формується і підпорядковується тим же законам, що і розглянута трохи вище:
padding:20px 10px 40px 30px;
У цьому правилі ми, починаючи з верху, описуємо всі чотири сторони. Якщо в ньому потрібно буде чогось скоротити (до трьох, двох або навіть одного значення), то потрібно буде використовувати описані трохи вище принципи скорочення для зовнішніх відступів, які рівно з таким же успіхом будуть працювати і для внутрішніх.
І останнє, що сьогодні я хотів би розглянути — це межі, які задаються за допомогою Border. У них є три типи параметрів:
У всіх цих трьох CSS правил є допустимий набір значень:
Ширина лінії для рамкиBorder-width) може задаватися як з допомогою цифр Em, Ex або Px, так і словами:
border-width:2px;
Значення кольору рамкиBorder-color) можна використовувати прийняті для кольорів в Html способи їх задання (шістнадцятковий код, слова і т. д.):
border-color:red;
За замовчуванням, якщо колір рамки явно не вказано, то буде використовуватися той, який використовується для шрифту усередині даного елемента.
CSS властивість Border-style дозволяє задати словами тип рамки:
Природно, що раз є чотири сторони будь-якого блоку, то можна використовувати як загальні правила, так і окремі для кожної із сторін:
Теж саме буде стосуватися і збірного правила Border — воно може бути прописано як для всіх сторін одночасно (Border), так і кожною зі сторін окремо (Border-top, left, bottom right). Порядок проходження значень не важливий:
border:1px solid red;
Якщо щось пропустити, то замість нього використовується значення за замовчуванням.
Удачі вам! До зустрічей на сторінках блогу
