1. Блокова модель в CSS - padding, margin і border
2. Margin (top, bottom, left, right) - зовнішні відступи в CSS
3. Padding і border - внутрішні відступи і рамки

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

1. top (верх) - наприклад, padding-top, margi-top, border-top
2. bottom (низ)
3. left (ліворуч)
4. right (праворуч)

Ну і для прикладу подивимося, що саме будуть позначати 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 коду видно неозброєним оком. Але і це ще не межа. Цілком допустимо використовувати в збірному правилі не тільки чотири, а й три, два і навіть всього одне значення. Що ще більше допоможе зменшити розмір коду. Однак, зменшувати кількість значень можна буде тільки в певних випадках:

1. Якщо величини зовнішніх відступів зліва і справа буде однаковими, наприклад, так: margin: 20px 30px 40px 30px;

   Те останнє можна буде опустити:

   margin: 20px 30px 40px;

   Ці два записи збірного правила роблять одне і те ж. Тому, якщо ви бачите запис з трьома величинами в Margin, то величину четвертого (праворуч) можна буде підглянути в другому (зліва).

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

2. Якщо крім рівності зовнішніх відступів зліва і справа має місце бути рівність їх величин зверху і знизу: margin: 20px 30px 20px 30px;

   або, що те ж саме (в силу пункту 1):

   margin: 20px 30px 20px;

   Щось таке збірне правило можна записати всього з двома значеннями, відкинувши останнім, яке збігається з першим:

   margin: 20px 30px; У цьому випадку перша величина описує зовнішні відступи по вертикалі, а друга - по горизонталі.

3. Ну і, нарешті, якщо всі значення в збірному правилі будуть однаковими: 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. У них є три типи параметрів:

1. Border-width - задає товщину рамки
2. Border-color - задає її колір
3. Border-style - тип рамки або ж тип лінії, якої вона буде отрисовать

У всіх цих трьох CSS правил є допустимий набір значень:

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

1. Thin - тонка лінія;
2. Medium - середня (дане значення використовується за умовчанням);
3. Thick - товста.

border-width: 2px;

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

border-color: red;

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

1. None - без рамки (використовується за умовчанням)
2. Dotted - лінія промальовується точками
3. Dashed - пунктиром
4. Solid - суцільною лінією
5. Double - подвійною лінією
6. Groove - втиснута рамка
7. Ridge - випирає
8. Inset і outset - гри з тінню

Природно, що раз є чотири сторони будь-якого блоку, то можна використовувати як загальні правила, так і окремі для кожної зі сторін:

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

border: 1px solid red;

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

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

Збірки по темі

Використовую для заробітку