Як розібратися в CSS

471
  • Блокова модель в CSS — padding, margin та border
  • Margin (top, bottom, left, right) — зовнішні відступи в CSS
  • Padding та border — внутрішні відступи та рамки
  • Здрастуйте, шановні читачі блогу . Сьогодні я хочу продовжити тему вивчення CSS (каскадних таблиць стилів) і розглянути ті стильові правила, які дозволяють задати відступи та межі для Html елементів: border, margin і padding.

    До цього ми встигли вивчити досить-таки прості властивості, які керували шрифтів (Font Weight, Family, Size, Style), текст (text-decoration, vertical-align, text-align) і розглянули модель формування фону в CSS через background.

    Як розібратися в CSS

    Так, ще ми і принципи використання селекторів встигли розглянути у всіх подробицях (розтягнувся на кілька статей). Тепер пора переходити до правил, які становлять основу побудови документів (вебсторінок), і ми почнемо саме з блочної моделі (взаємини Html-елементів).

    У загальних рисах я вже писав про блокову Div верстку та сучасну верстку сайту, ну, а сьогодні буде вже чиста конкретика. Якщо ви захочете ознайомитися з попередніми публікаціями по темі, то милості прошу в довідник.

    Блокова модель в CSS — padding, margin та border

    Для браузера Firefox є чудовий плагін під назвою Фаербаг, про який я вже досить давно і докладно писав.

    При перегляді інформації про будь-якому Html тегу веб сторінки, цей плагін на вкладці «Макет» дозволяє побачити дуже наочне уявлення відступів і меж даного елемента відносно батьківського і тих тегів (або ж вмісту), які укладені усередині нього (матрьошка така виходить):

    Як розібратися в CSSЯк розібратися в CSS

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

    Якщо починати розглядати цю матрьошку зсередини, починаючи з вмісту, то далі йде область внутрішнього відступу від цього вмісту до рамки цього тегу. Розмір області задається з допомогою CSS правила Padding, а ширину рамки можна задати за допомогою Border.

    Слідуючи з центру до периферії, ми після рамки повинні будемо задати область зовнішнього відступу з допомогою Margin. Воно дозволяє регулювати взаємовідносини з кордонами інших блоками. Наприклад, з допомогою завдання негативних відступів в CSS правилі мерджин, можна домагатися накладення одних блоків веб сторінки на інші сусідні блоки цієї сторінки.

    Відразу обмовлюся, що ви можете задавати Padding та Margin, а також розміри рамки Border окремо для кожної з сторін блоку (прямокутної області), які визначаються як:

  • top (верх) — наприклад, padding-top, margi-top, border-top
  • bottom (низ)
  • left (зліва)
  • right (праворуч)
  • Як розібратися в CSSЯк розібратися в CSS

    Ну і для прикладу подивимося, що саме будуть позначати border, margin і padding стосовно якимось конкретним сторонам блочної моделі:

    Як розібратися в CSSЯк розібратися в CSS

    Взагалі для її розуміння потрібно перш за все зрозуміти, що будь-який Html елемент лежить всередині якоїсь області. Цю область в CSS прийнято називати контейнер, і зазвичай контейнером для блоку є область контенту його батьківського елементу.

    На наведеному трохи вище скріншоті межа зовнішнього контейнера позначена чорною зовнішньої рамочкою, ну а для ув’язнених всередині батьківського елемента тегів (якщо такі мають місце бути) контейнером вже буде внутрішня область, забарвлена в жовтуватий колір. Пояснює скріншот:

    Як розібратися в CSSЯк розібратися в CSS

    Вийшло трохи заплутано, але так воно завжди буває спочатку. З часом у вас все в голові устаканиться і блокова модель прийме ясні і стрункі обриси. Інакше і бути не може.

    Margin (top, bottom, left, right) — зовнішні відступи в CSS

    Давайте почнемо розгляд властивостей CSS для завдання відступів і кордонів з Margin. Зрозуміло, що це правило може бути написано окремо для кожної з сторін блочної моделі і в ньому допустимо використовувати наступні значення:

    Як розібратися в CSSЯк розібратися в CSS

    Наш елемент, для якого ми прописує дане правило, взаємодіє з межами свого контейнера та з межами сусідніх блоків, які в коді розташовані поруч з ним. Відповідно, існують чотири 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, яке у багатьох випадках дозволяє скоротити розмір коду використовується для задання необхідних зовнішніх відступів. Порядок проходження значень у ньому суворо регламентується (вони прописуються через пробільний символ) і повинен відповідати зразку:

    Як розібратися в CSSЯк розібратися в CSS

    Тобто перерахування починається з верхнього (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 і подивимося, які саме значення воно може приймати:

    Як розібратися в CSSЯк розібратися в CSS

    Як ви можете бачити, тут немає згадки Auto, а також це CSS правило не допускає використання від’ємних значень (вони можуть бути тільки позитивними — від нуля і вище). Тобто з допомогою Padding контент за межі рамки висунути ніяк не вийде. Максимум що можна зробити, це контент впритул наблизити до рамки.

    Відсотки в ньому вважаються точно так само, як в Margin — щодо ширини контейнера (області вмісту батьківського елемента), в якому укладено наш елемент. Збірне правило Padding в Css формується і підпорядковується тим же законам, що і розглянута трохи вище:

    Як розібратися в CSSЯк розібратися в CSS

    padding:20px 10px 40px 30px;

    У цьому правилі ми, починаючи з верху, описуємо всі чотири сторони. Якщо в ньому потрібно буде чогось скоротити (до трьох, двох або навіть одного значення), то потрібно буде використовувати описані трохи вище принципи скорочення для зовнішніх відступів, які рівно з таким же успіхом будуть працювати і для внутрішніх.

    І останнє, що сьогодні я хотів би розглянути — це межі, які задаються за допомогою Border. У них є три типи параметрів:

  • Border-width — задає товщину рамки
  • Border-color — задає колір
  • Border-style — тип рамки або ж тип лінії, якою вона буде отрисована
  • У всіх цих трьох CSS правил є допустимий набір значень:

    Як розібратися в CSSЯк розібратися в CSS

    Ширина лінії для рамкиBorder-width) може задаватися як з допомогою цифр Em, Ex або Px, так і словами:

  • Thin — тонка лінія;
  • Medium — середня (це значення використовується за замовчуванням);
  • Thick — товста.
  • border-width:2px;

    Значення кольору рамкиBorder-color) можна використовувати прийняті для кольорів в Html способи їх задання (шістнадцятковий код, слова і т. д.):

    border-color:red;

    За замовчуванням, якщо колір рамки явно не вказано, то буде використовуватися той, який використовується для шрифту усередині даного елемента.
    CSS властивість Border-style дозволяє задати словами тип рамки:

  • None — без рамки (використовується за замовчуванням)
  • Dotted — лінія малюється точками
  • Dashed — пунктиром
  • Solid — суцільною лінією
  • Double — подвійний лінією
  • Groove — втиснутий рамка
  • Ridge — кнопка
  • Inset і outset — ігри з тінню
  • Природно, що раз є чотири сторони будь-якого блоку, то можна використовувати як загальні правила, так і окремі для кожної із сторін:

    Як розібратися в CSSЯк розібратися в CSS

    Теж саме буде стосуватися і збірного правила Border — воно може бути прописано як для всіх сторін одночасно (Border), так і кожною зі сторін окремо (Border-top, left, bottom right). Порядок проходження значень не важливий:

    Як розібратися в CSSЯк розібратися в CSS

    border:1px solid red;

    Якщо щось пропустити, то замість нього використовується значення за замовчуванням.

    Удачі вам! До зустрічей на сторінках блогу