Змінити відступи і відстань зверху на CSS. Відступ зверху CSS: позиціювання контенту Css відступ праворуч від краю

У цій статті я хотів би розповісти, як правильно розставляти поля(Padding) і відступи(Margin) в CSS.

Перш за все давайте згадаємо визначення полів і відступів згідно специфікації W3C. У боксової моделі (box model) поля - це відстань між контентом (content) і межею блоку (border). А відступи це відстань між межею блоку і кордоном сусідньої або батьківського елемента.

Таким чином, якщо межа і фон елемента не задані, то немає різниці, використовувати властивість padding або margin для завдання відступів, але за умови, що ширина (width) і висота (height) елемента не задані і не змінений алгоритм розрахунку розмірів контенту за допомогою властивості box-sizing.

У будь-якому випадку слід пам'ятати, що поля можуть бути як включені в ширину або висоту елемента, так і немає. Відступи ж завжди задаються зовні елемента.

Тепер давайте розглянемо як правильно розставляти поля і відступи між елементами. Візьмемо як приклад наступний блок.

Це блок новин news. Він складається з заголовка, списку новин і посилання «Інші новини». Дамо їм такі назви класів: news__title, news__list і news__more-link.

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

News (padding: 20px 25px;)

Таким чином, при необхідності змінити значення полів справа і зліва це потрібно буде зробити в одному місці. А при додаванні нового елемента всередину блоку новин, він вже матиме потрібні відступи зліва і справа.

Часто буває так, що всі елементи всередині блоку мають однакові відступи зліва і справа, крім одного, який взагалі не повинен мати відступів, наприклад, через фону. В цьому випадку для елемента можна задати негативні відступи. Тоді не доведеться прибирати поля всередині блоку для інших елементів.

Тепер потрібно задати вертикальні відступи між елементами. Для цього слід визначити, який із елементів є обов'язковим. Очевидно що блок новин не може існувати без списку новин, в той же час посилання «Інші новини» може і не бути, заголовок теж може бути прибраний, наприклад, при зміні дизайну.

З огляду на це, задаємо для заголовка відступ знизу, а для посилання «Інші новини» відступ зверху.

News__title (margin-bottom: 10px;) .news__more-link (margin-top: 12px;)

Ми могли б досягти такого ж зовнішнього результату, додавши відступи зверху і знизу для списку новин.

News__list (margin: 10px 0 12px 0;)

Тепер потрібно задати відступи між окремими новинами. Знову ж таки, потрібно взяти до уваги, що кількість новин може змінюватися, і в списку може бути тільки одна новина.

Можна задати для кожної новини крім першої відступ зверху, або для кожної новини крім останньої відступ знизу. Перший варіант більш кращий, оскільки псевдоселектор: first-child був доданий в специфікації CSS 2.1 і має більш широку підтримку, на відміну від псевдоселектора: last-child, який був доданий тільки в специфікації CSS версії 3.0.

News__list-item (margin-top: 18px;) .news__list-item: first-child (margin-top: 0;)

Таким чином, правильна розстановка полів і відступів дозволяє гнучко змінювати зовнішній виглядбудь-якого блоку без внесення змін до стилі і без порушень в дизайні. Найголовніше - визначити, які елементи блоку є основними ( обов'язковими), а які опциональнимі.

Іноді ми не можемо спиратися на обов'язкові елементи. Наприклад, у нас є спливаюче віконце popup, всередині якого може виводитися якийсь заголовок і текст. Причому в якихось випадках може не бути тексту, а в якихось і заголовка. Тобто обидва елементи є опціональними.

В цьому випадку можна використовувати наступний спосіб завдання відступів.

Popup__header + .popup__text (margin-top: 15px;)

Тоді відступ з'явиться, тільки якщо будуть використовуватися обидва елементи. У разі ж виведення тільки заголовка або тільки тексту, зайвого відступу не буде.

Схлопування вертикальних відступів

Ще один нюанс, про який не всі знають, пов'язаний з вертикальними відступами між сусідніми блоками. У визначенні відступів, яке я наводив вище, сказано, що відступ - це відстань між кордонамипоточного і сусіднього блоку. Таким чином, якщо ми розташуємо два блоки один під одним і поставимо одному з них відступ знизу в 30px, а іншому відступ зверху в 20px, відступ між ними буде не 50px, а 30px.

Тобто відбудеться накладення відступів, і відступ між блоками буде дорівнює найбільшому відступу, а не сумі відступів. Цей ефект також називають «спаданням».

Прошу зауважити, що горизонтальні відступи, на відміну від вертикальних, не "схлопиваются», а підсумовуються. Поля (padding) також підсумовуються.

Знаючи про «схлопуванні» відступів, ми можемо використовувати цю особливість в свою користь. Наприклад, якщо нам необхідно розставити відступи для заголовків і тексту всередині статті, то для заголовка першого рівня задамо відступ знизу в 20px, а для заголовка другого рівня відступ зверху 20px і знизу 10px, а для всіх параграфів задамо відступ зверху 10px.

H1 (margin-bottom: 24px;) h2 (margin-top: 24px; margin-bottom: 12px;) p (margin-top: 12px;)

Тепер заголовок h2 можна розташувати як після заголовка h1, так і після параграфа. У будь-якому випадку відступ зверху не буде перевищувати 24px.

Загальні правила

Підводячи підсумок, я б хотів перерахувати правила, яких я дотримуюся при розстановці полів і відступів.

1. Якщо сусідні елементи мають однакові відступи, то краще ставити їх батьківського контейнера, а не елементів.
2. При завданні відступів між елементами, слід враховувати, обов'язковий це елемент або опціональний.
3. Для списку однотипних елементів - не забувати про те, що число елементів може варіюватися.
4. Пам'ятати про накладення вертикальних відступіві використовувати цю особливість там, де вона принесе користь.

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

Поля і відступи: в чому різниця?

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

• поле задається властивістю padding, Відступ - margin;
• поле визначається проміжком між вмістом і межею блоку, відступ - між кордонами сусідніх блоків;
• поля можуть як враховуватися в розмірах елемента (ширині і висоті), так і немає.

властивість margin

Отже, щоб задати горизонтальний або вертикальний відступ тексту CSS, використовують конструкцію margin. Дана властивість застосовується до тегу задає абзац документа. У найпростішому випадку воно записується як:

margin: 12px.

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

margin: 36px.

Але що робити, якщо інтервал між блоками повинен бути різний з кожного боку? Розробники веб-сторінок використовують кілька форм записи:

1. margin: 11px 22px.
2. margin: 11px 22px 33px.
3. margin: 11px 22px 33px 44px.

У першому прикладі від нижньої і верхньої меж блоку будуть зроблені відступи по 11 пікселів, з боків блоку - по 22 пікселя. Згідно з другою формою запису, між верхнім краєм блоку і контентом буде 11 пікселів, між нижнім - 33 пікселя, з боків - по 22 пікселя. У третьому випадку відступ буде мати значення 11 пікселів зверху, 22 пікселя праворуч, 33 пікселя знизу і 44 пікселя зліва.

Також доступна можливість запису відстані до кордону блоку тільки з одного боку: margin-top, margin-bottom, margin-left, margin-right. Перевівши назви властивостей на російську мову, нескладно здогадатися про їх призначення. Наприклад, такий запис говорить про те, що відступ справа буде дорівнює 22 пікселя:

margin-right: 22рх.

Для інших сторін відстані навколо блоку приймаються рівними значенням елемента-батька.

властивість marginмає особливість, яку повинен пам'ятати розробник, коли використовує відступ тексту CSS по вертикалі. Інтервали сусідніх елементів не підсумовуються, а накладаються один на одного. Наприклад, нехай один з блоків має margin-bottom: 15px, А примикає до нього знизу блок margin-top: 35px. Шкільна арифметика і здоровий глузд підказують, що загальний відступ між ними буде 50 пікселів. На практиці це не так. Блок з великим значенням властивості margin«Поглине» свого сусіда. В результаті інтервал між елементами буде 35 пікселів.

"Червоний рядок

Оформляючи документ в текстовому редакторі, Користувачі вважають за краще ставити кожен новий абзац за допомогою «червоної» рядки. З допомогою CSSвідступ тексту зліва нескладно зробити - використовується конструкція text-indent. Записується вона так:

text-indent: 11px.

Тобто перший рядок абзацу буде зрушена відносного лівого краю на 11 пікселів. Щоб текст на веб-сторінці більше скидався на документ в редакторі, слід додатково встановити тобто записати:

text-indent: 11px;

text-align: justify.

Крім пікселів, при описі розмітки можуть використовуватися інші одиниць - дюймів, пунктів, відсотків. Нехай блок має відступ тексту CSS, рівний 10%. При ширині блоку, що дорівнює 500 пікселям, новий рядок буде складати 50 пікселів (10% від 500).

Для даного властивості може бути виставлено значення inherit. Такий запис говорить, що блок використовує аналогічне властивість батьківського блоку.

text-indent: inherit.

Дивно, але може приймати і негативні значення! В цьому випадку формуються так звані виступи, тобто основний текст залишається на місці, а перший рядок зміщується вліво на 22 пікселя:

text-indent: -22px.

Щоб літери не перейшли за ліву межу браузера, додатково до text-indentпотрібно використовувати конструкцію для завдання поля:

padding-left: 22px.

Основні властивості CSS для розглянуті. А закріпити їх допоможе практика. Ось декілька заключних порад, як застосовувати вивчений матеріал при розробці веб-сайтів:

• новий рядок і відступ тексту - різні поняття, і для їх вказівки використовуються різні властивості;
• для вертикальних відступів правила математики не діють - інтервали накладаються, «перемагає» елемент з великим значенням;
• негативний абзацний відступ використовують, щоб вказати перший рядок абзацу за допомогою зображення.

опис

CSS властивостейпро margin-top встановлює зовнішній відступ зверху елемента. Відступом є відстань від зовнішнього краю верхньої межі поточного елемента до внутрішньої межі його батьківського елемента або до кордону елемента, розташованого над ним. Зверніть увагу, для малих елементів (display: inline;) можуть бути встановлені тільки зовнішні відступи з лівого і з правого боку.

Розмір зовнішнього верхнього відступу можна вказувати в пікселях (px), відсотках (%) або в інших одиницях виміру CSS. Значення може бути як позитивним, так і негативним.

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

об'єднання полів

1. Поля сестринських елементів, розташованих один під іншим і знаходяться в потоці документа, об'єднуються в одну загальну. Висота отриманого поля дорівнює висоті більшого з двох полів, наприклад: поле верхнього елементу (margin-bottom) становить 10px, а нижнього елемента (margin-top) - 20px, єдине поле в цьому випадку буде висотою 20px.
2. Об'єднання полів батьківського і дочірнього елемента, що знаходяться в потоці документа, відбувається, якщо батьківський елемент не має нічого з того, що могло б відокремлювати його зовнішній відступ від зовнішнього відступу дочірнього елемента (рамки, внутрішнього відступу або сатиричного вмісту). Також об'єднання полів не відбуватиметься, якщо батьківського елементу встановити властивість overflow із значенням hidden або auto. Плюс від цього способу полягає в тому, що розмір батьківського елемента не збільшується.

Поля і відступи є дуже важливими стилями при побудові HTML-сторінки. Вони дозволяють більш точно спозиционировать елементи, створити каркас з необхідними зазорами і т.п. Обидва стилю дуже схожі і виконують схожі функції. Але відмінності все ж є.

Елементи можуть бути вкладеними, можуть перебувати по сусідству один від одного. Давайте розглянемо наступний приклад:

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

Поля задаються стилем padding. Цей стиль застосовується лише до елементів-контейнерів, які можуть містити в собі інші елементи. Стиль дозволяє задати значення полів між краями елемента і його вмістом. стиль marginдозволяє задати відступи від елемента до найближчих кордонів іншого елемента. Кордонами іншого елемента можуть бути межі батьківського контейнера, а також краю самої сторінки.

Існує кілька способів завдання цих стилів. Наприклад, безпосередньо вказати розмір усіх полів або відступів одним аргументом на який-небудь одиниці виміру (px, ex, em, pt, cm і так далі):

В цьому випадку поля і відступи будуть з усіх чотирьох сторін однакові. При завданні двох аргументів через пробіл:

перший визначатиме величину полів / відступів зверху і знизу, другий - зліва і справа. При завданні трьох аргументів:

перший - поле / відступ зверху, другий - одночасно зліва і справа, третій - знизу. При чотирьох аргументах:

перший - поле / відступ зверху, другий - праворуч, третій - знизу, четвертий - зліва. Легко запам'ятати: перший - зверху, далі за годинниковою стрілкою. Крім того, можна задавати поля і відступи для конкретного краю окремо, за допомогою відповідних стилів: padding-top, padding-right, padding-bottom, padding-left, margin-top, margin-right, margin-bottom, margin-left. Значним цих стилів може бути тільки один аргумент, що задає величину поля / відступу для даної сторони.

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

В результаті сторінка змінить вигляд до наступного:

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

Зауважте, що відступ ми задаємо саме таблиці, а не комірці таблиці, як у випадку з полями. Ось результат:

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

HTML-код піддослідної сторінки:

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

Оскільки велика частина вмісту веб сторінки представлена ​​у вигляді тексту, здатність стилізувати цей текст як привабливий, так і ефективний, це важливий навик, який може стати веб дизайнером. Для створення відступу опис і абзацу найбільш часто використовуваних і рекомендованих методом буде використання CSS. Тут будуть вам надані різні приклади того, як CSS можна використовувати для тексту і елемента відступу.

Задати зовнішній відступ зверху на CSS

Щоб створити верхні відступи використовується, то безумовно без CSS властивостей не обійтися, тому нам потрібно margin-top, це значення що можна по-різному ставити, як в px і стандартно на пікселях, em,% і так далі, що все відбувається в CSS стилістиці в одиницях вимірювання.

Приклад використання:

Margin-block (
margin-top: 50px;
}

Що можна подивитися на зображення:

Також можна задіяти, щоб упустити блоки, то тут можете задіяти властивість під назвою margin-leftтакож margin-rightі margin-bottom. Де просто вказуємо властивість margin, де під нього є можливість спочатку задати 4 параметра, тут розглянемо за годинниковою стрілкою для поняття, де почнемо з верхньої сторони з продовженням під кожну зі сторін.

margin: 20px 50px 30px 50px;

Також є внутрішній відступ зверху на CSS

Буває таке, що потрібно вирівняти елемент контенту по вертикалі, це відносно батьківського блоку, тут є можливість задіяти вже інші властивості, як padding-top, що робить, а точніше за замовчуванням задає внутрішній відступ по вгору. Якщо говорити про аналогічні властивості, що також можна прописати і задати по аналогу, то тут йде margin в px, em,% і інших одиницях.

приклад:

Padding-block (
padding-top: 47px;
}

Тепер можна розглянути аналог властивості marginі padding, Який задіяний під завдання відступів з інших сторін елемента блоку, але вже йде окремо: padding-left, padding-right, padding-bottom. Де відразу можна задати то відстань, який вам потрібно, тільки вже для всіх сторін, і все буде одночасно.

padding: 10px 20px 40px 50px;

Тут спочатку можна задати значення як і для marginпочинаючи як розумієте зверху, а ось далі все йде за годинниковою стрілкою, це справа, знизу, зліва, і так далі.

Тепер в залежності від різної ситуації, у вас є можливість зробити відступи зверху на стилях CSS, де задіємо властивості marginі padding, Що є можливість виставити необхідні елементи на сторінці свого інтернет ресурсу, так як ви задумали і вам потрібно зробити.