Блокова верстка часто використовується при створенні сайту чи блогу. Як наслідок — часто потрібно робити відступи у блоків. З цієї причини про те, як зробити відступи в CSSдокладно описано у цьому уроці. Для браузера кожен тег є контейнером, який має вміст, внутрішній відступ, зовнішні поля, а також рамка. У цьому уроці ми навчимося робити внутрішні та зовнішні відступи, розглянемо основні їх параметри.
На малюнку нижче наочно представлені параметри відступів блоків:
Як видно, відступи можна робити у чотирьох напрямках: верхній відступ (top), нижній відступ (bottom), лівий відступ (left) та правий відступ (right). Як одиниці виміру можуть бути пікселі, відсотки та інші одиниці CSS - докладніше про них. В уроці використовуються пікселі.
Внутрішні відступи блоків
За внутрішні відступи CSS відповідає властивість padding. Отже, розглянемо приклад завдання внутрішніх відступів у блоку:
padding-top: 5px; /*верхній внутрішній відступ*/ padding-left: 8px; /*лівий внутрішній відступ*/ padding-right: 8px; /*правий внутрішній відступ*/ padding-bottom: 5px; /*нижній внутрішній відступ*/
У цьому прикладі внутрішні відступи задаються окремо кожної сторони блока. Крім цього, існує кілька способів завдання відступів CSS:
margin: 5px 8px 5px 8px; /*верхній, правий, нижній, лівий зовнішні відступи*/ margin: 5px 8px 5px; /*описує верхній, лівий і правий, нижній відступи*/ margin: 5px 8px; /*описує верхній та нижній, правий та лівий відступи*/ margin: 7px; /*описує всі внутрішні відступи по 7px*/
Запам'ятати простіше перший та останній способи. У першому випадку відступи ставляться за годинниковою стрілкою (верхній, правий, нижній, лівий) - величину відступу ми можемо вказати будь-яку, у разі відступи з усіх боків будуть однакові.
Зовнішні відступи блоків
За зовнішні відступи CSS відповідає властивість margin. Приклади зовнішніх відступів CSS:
margin-top: 5px; /*верхній зовнішній відступ*/ margin-left: 10px; /*лівий зовнішній відступ*/ margin-right: 10px; /*правий зовнішній відступ*/ margin-bottom: 5px; /*нижній зовнішній відступ*/
padding: 5px 10px 5px 10px; /*верхній, правий, нижній, лівий зовнішні відступи*/ padding: 5px 10px 5px; /*описує верхній, лівий і правий, нижній відступи*/ padding: 5px 10px; /*описує верхній та нижній, правий та лівий відступи*/ padding: 7px; /*описує всі зовнішні відступи по 7px*/
Таким чином, як зробити відступи в CSS— питання не складне, але дуже актуальне. Щоб краще засвоїти описану вище інформацію слід запам'ятати, що є дві властивості: padding — внутрішні відступи і margin — зовнішні відступи. Також, як ви вже знаєте, способів завдання відступів існує декілька, їх можна використовувати.
Вітаю вас на моєму блозі. Css (каскадні таблиці стилів) надає багато можливостей для налаштування зовнішнього вигляду веб-сторінок. Сьогодні я хотів би коротко показати, як визначити в css відступ зверху або з будь-якої іншої сторони для будь-якого елемента.
Зовнішній відступ
Зовнішній відступ задається за допомогою властивості margin. З його допомогою можна задати відступи відразу з усіх чотирьох сторін або використовувати інші властивості: margin-top, margin-left, margin-right, margin-bottom, які дозволяють зробити його тільки з одного боку.
Зовнішній відступ визначає відстань, на яку вибраний край елемента буде відсунутий від інших елементів на сторінці. Наприклад, запис:
P, div(
Margin-top: 20px;
}
Це означає, що всі блоки та абзаци отримають відступ зверху на 20 пікселів, тобто їх верхній край буде відсунутий від прилеглих до нього елементів на цю відстань.
Відступи можна записати з кожної сторони тільки за допомогою однієї властивості margin, якій записується 4 значення поспіль:
Div(
Margin: 20px 10px 20px 10px;
}
Відступи будуть дані з верхнього, правого, нижнього та лівого країв відповідно. Оскільки в цьому випадку вони рівні з протилежних сторін, можна було б записати ще так:
Div(
Margin: 20px 10px;
}
Перше значення – це відступ зверху та знизу, а друге – з обох боків.
Внутрішній відступ
Внутрішній відступ працює по-іншому - він не відсуває блок від інших елементів, а додає цю відстань усередині елемента, відсуваючи вміст (контент) блоку від його країв. Це зручно. Де ви бачили сайт, на якому текст починається у самому лівому верхньому краї вікна?
Я такого не бачив, тому що веб-розробники завжди застосовують зовнішні та внутрішні відступи, щоби текст читався максимально зручно. Внутрішні відступи прописуються за допомогою властивості padding , в якому через пропуск можна перераховувати відразу 4 значень для всіх країв відповідно.
Також аналогічно з margin можна дописати назву сторони та задати відстань тільки для неї. Наприклад, відступ зверху можна написати за допомогою padding-top. В цілому, властивість padding працює абсолютно аналогічно властивості margin.
Для прикладу можна навести такий шматок коду:
Block(
Width: 200px;
Padding: 20px;
}
Як ви вважаєте, якою буде реальна ширина нашого елемента? Тут видно, що вона 200 пікселів, але паддінги додають з боків з кожного боку ще по 20, разом 240 пікселів. Зважайте на це при верстці.
Також хотів би відзначити, що padding нормально задається тільки блоковим елементам, малим краще його не давати. Margin нормально працює з будь-якими елементами.
Для більш красивого відображення елементів на web-сторінці застосовують зовнішній та внутрішній відступи у css і на прикладах ми це зараз розберемо.
Кожен елемент, чи це параграф, div, картинка чи відео, - це якийсь блок, у якому можна зробити відступи як усередині з допомогою властивості padding , і зовні з допомогою margin .
У css прописуються ці властивості для відступів таким чином (наприклад взято параграф):
Замість тега P ви пропишіть свій елемент, зрозуміло, для якого будуть застосовані відступи.
Обов'язково потрібно усвідомити і запам'ятати, що для параметрів margin і padding побудова відступів кожної сторони йде однакове.
Тобто, у нас по 4 значення у кожному відступі:
Значення відступів.
- Перше значення:відступ зверху;
- Друге значення:відступ праворуч;
- Третє значення:відступ знизу;
- Четверте значення:відступ ліворуч.
У даному прикладі я зробив margin зовнішній відступ у css таким чином: зверху я прописав 20px , ліворуч і праворуч по 10px (як правило вони для симетрії прописуються однакові), і знизу вказав 30px .
А для padding внутрішнього відступу я вказав: по 10px зверху, ліворуч та праворуч, та 14px знизу.
Значення для відступів у властивостях margin і padding можна скорочувати, якщо вони мають однакову величину.
З мого прикладу скорочений запис матиме такий вигляд:
Тобто, коли відсутній останній числовий запис, в даному випадку для відступу зліва, то браузер автоматично підставляє для відступу зліва таке ж значення як і значення праворуч.
І в моєму випадку відступи праворуч і ліворуч будуть по 10px що в margin, що в padding.
А якщо у вас однакові величини для зовнішніх відступів зверху і знизу (наприклад: 16px), і так само однакові величини для зовнішніх відступів зліва і праворуч (наприклад: 20px), то запис матиме ще більш скорочений вигляд:
Відповідно для внутрішнього відступу css записробиться ідентично до цієї.
Застосування одинарних відступів: кожної сторони окремо.
Для вказівки окремого відступу застосовуються такі властивості з одним значенням:
Властивості відступу кожної сторони.
- margin-top: 3px; зовнішній верхній відступ;
- margin-left: 4px; зовнішній лівий відступ;
- margin-right: 6px; зовнішній правий відступ;
- margin-bottom: 10px; зовнішній нижній відступ.
Так само прописуються записи і для внутрішніх відступів, тільки потрібно замінити margin на padding.
Наприклад, у вас для всіх картинок img вже прописані в css всі відступи.
Тобто (для з'ясування) зовнішній відступ має такі значення: зверху 10px, ліворуч і праворуч: по 20px, і знизу 14px.
А внутрішній відступ дорівнює по 6px з усіх чотирьох сторін.
Допустимо, ви вирішили поставити ще картинку на сторінку, але для неї ви хочете змінити тільки зовнішній відступ зверху, а решту залишити як є. І для виконання цього завдання достатньо прописати class для цієї картинки, і додати до css додатковий запис.
У результаті, додана вами картинка з класом verx прийме всі відступи прописані в css для тега img і змінить тільки зовнішній відступ для верхньої сторони (у нашому випадку: 40px).
Я постарався зробити опис для відступів css більш детально, але якщо виникнуть питання ставте їх через коментарі.
Вітаю! Спочатку хотів розділити цю статтю на 4 маленькі, але потім задумався. Навіщо? Адже зручніше, коли таку інформацію зібрано в рамках одного матеріалу.
Тому сьогодні ми дізнаємося, як зробити CSS відступ ліворуч і з усіх інших сторін - праворуч, зверху та знизу. Їх можна робити для картинок та текстів. Вони бувають двох видів:
- Зовнішні;
- Внутрішні.
Для перших використовується ключові властивості margin, для других – padding. Для наочності зробив вам невеликий приклад. Щоб візуально було зручно розрізняти внутрішній та зовнішній простір додав видиму таблицю. Погляньмо, що вийшло?
Зовнішні відступи
Прописавши їх у файлі стилів CSS, вдасться встановити орієнтацію інформаційного блоку на сторінці. Наприклад, зсунувши його вліво та вниз. Давайте одразу продемонструю, як це виглядатиме.
Загалом можна застосовувати такі варіанти для завдання відступів.
Зліва (margin-left).
Праворуч (margin-right).
Згори (margin-top).
Знизу (margin-bottom).
Нині покажу ще класний нюанс.
Як бачите, можна використовувати один із варіантів – ефект однаковий. Тільки у другому випадку код виходить компактнішим. Також зауважте, що відступи задаються за годинниковою стрілкою. Все починається згори і закінчується зліва.
Внутрішні відступи
Порядок дій тут схожий. Тільки тепер додам нові властивості не для всієї таблиці, а вмісту стовпців.
Дивимося, що з цього вийшло.
За аналогією з внутрішніми відступамив CSS зовнішніможна прописувати скороченим кодом або для сторін окремо.
То були основні моменти. Насамкінець покажу, як ще можна полегшити деяку роботу.
Відступи на рівні вибраних тегів
У випадках, які переглянули вище, вони задаються для тексту та картинок одночасно. Насправді можна задати відстань до елементів лише на рівні певного тега. Покажу як це працює. Скасовую останні змінита вказую спеціальний код у файлі стилів.
Погляньмо, що сталося після збереження змін.
Картинка залишилася на місці, ліворуч змістився лише текст, укладений у . Подібні маніпуляції можна застосовувати і до інших блоків, наприклад tr, span.
В якості додаткової інформаціїпропоную для ознайомлення публікацію про завдання. Там теж описано достатньо цікаві способи. Може стати в нагоді для формування червоного рядка в тексті або проведення інших дій.
Додатково працює підписка на безкоштовне розсиланняінформації з електронним адресам. Для підписки на блозі є спеціальна форма. До зв'язку.
З появою властивостей управління відступами на css у web розробників з'явилися величезні можливості управління інтерфейсом і дизайном сторінок сайтів. До цього відступами управляли з допомогою таблиць, що було значно складнішим і об'ємним.
Розглянемо основні властивості керування відсутпами.
Керування зовнішніми відсупами в HTML на CSS за допомогою margin
Властивість css marginдозволяє керувати саме зовнішніми відступами. Допустимо є зображення, для якого потрібно вказати зовнішні відсупи: 30 пікселів зверху, 20 ліворуч, 10 праворуч і 5 знизу.
Для завдання відсупу зверху ми пропишемо: margin-top: 30px
Для завдання відступу зліва: margin-left: 30px
Відступ праворуч: margin-right: 10px
І знизу: margin-bottom: 5px
Можна все об'єднати, прописавши наступне: margin: 30px 10px 5px 20px;
Наприклад, задамо ці відступи для зображення. Отримуємо наступний html код:
На видно як зображення змістилося щодо батьківського елемента.
Якщо ж прописати margin: 30px, то відступи cssбудуть однакові з усіх чотирьох сторін і дорівнюватимуть 30 пікселям.
Є варіантивказівки двох та трьох значеньу специфікації: margin:10px 20px;. Даний параметр зробить так, що з'являться зовнішні відступи на css зверху та знизу 10px, зліва та праворуч 20px;
Часто для верстальників-початківців не завжди виходить відразу запам'ятати всі можливі комбінації, тому на початкових етапахможна використовувати параметри: margin-top, margin-right, margin-left та margin-bottom. Top - вгору, right-право, left-ліво, bottom-знизу.
