Вітаю вас на моєму блозі. 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 нормально працює з будь-якими елементами.
Верстка CSS завжди була прямокутною. Будь-які плавні лінії – компетенція розробника. Стилеві правила надають достатньо варіантів, щоб надати сторінці гладкі форми в межах роздільної здатності екрана. Але будь-який елемент верстки - це прямокутник, у якому розташування інформації регулюється правилами CSS.
Відступи з усіх боків важливі для кожного елемента сторінки, коли він абсолютно позиціонований, а відступ зверху CSS визначається особливо, оскільки він має значення для різних елементів, особливо малих.
Основні правила позиціонування
Блоковий елемент має правило відступу від сторін елемента, в якому знаходиться (margin), правило відступу для елементів усередині його (padding) та ширину рамки (border), яку також можна використовувати.
Особливого значення має відступ зверху. CSS всередині блоку пов'язує правила внутрішніх відступів з правилами абсолютно відносно позиціонованих елементів всередині цього блоку.
Звичайна практика CSS-правил: можна вказати відступи з усіх боків однаково, попарно зверху/знизу та праворуч/ліворуч або кожної сторони окремо. Наприклад,
- margin: 10px;
- padding: 10px20px;
- padding: 10px20px30px40px.
У першому випадку встановлюється відступ елемента від сторін зовнішнього контейнера, де він знаходиться. У другому випадку відступи зверху і знизу дорівнюють 10px, ліворуч і праворуч - 20px. У третьому випадку вказані розміри відступів з усіх боків: зверху, праворуч, знизу та зліва.
У всіх зазначених випадках відступ зверху CSS дорівнює 10 px.
Правила, що змінюють положення елементів
Якщо елемент верстки не позиціонований абсолютно, він розташований у загальному порядку формування сторінки.
Якщо визначити Відступ зверху CSS в елементі scCurrInfo, ціль буде досягнута, а якщо на рівні li - ні.
У цьому прикладі використання правила padding: 40px; вимагає адекватного зменшення правил width і height на 80px. В іншому випадку розмір блоку scCurrInfo вилізе за межі зовнішнього блоку.
Якщо прибрати правило padding з опису scCurrInfo, але додати його зі значенням 20px в опис стилю списку, отримаємо тільки відступ зверху. CSS не застосовує це значення до інших сторін.
Звичайно, таке використання правила відступу відноситься до кожного елемента li.
Загальна практика форматування контенту
Деякі розробники досягають досконалості, верстаючи сторінки блоковими елементами. Мабуть, це класична практика – починати з таблиць та закінчувати власний освітній процес на блоках.
Свобода, властива блоковій верстці, заворожує, і уява розробника може обмежуватися строгими табличними правилами: лише ряди, лише осередки, злиття лише з горизонталі і вертикалі. Нічого не властивого реляційним ідеям.
Тим часом таблиці, крім очевидних недоліків, мають безліч якісних переваг. Створюючи відступи згори, CSS враховує відступи зліва, справа (знизу - це особливий момент). Правила осередків таблиці дозволяють керувати вирівнюванням як у вертикалі, і по горизонталі. Використовуючи стилі рядів, комбінуючи їх із стилями осередків, можна формувати складні уявлення контенту.
Звичне уявлення сторінки як прямокутників зовсім заважає її у вигляді таблиці. Це теж прямокутники, але вони ж і комірки таблиці, тобто мають власні правила, що доповнюють правила блоків.
Абсолютне позиціонування
Блок із правилом POSITION: absolute ; буде перебувати у місці, встановленому його координатами щодо блоку, де він перебуває.
Характерна риса правил CSS- "практика - найкращий критерійістини" в більшості випадків, особливо коли потрібна кросбраузерність і верстка проводиться вручну, краще вивчення повноцінних мануалів за каскадними таблицями стилів.
Використання таблиць часто призводить до проблем усунення вмісту осередків. Аналогічне усунення всередині блоку впливає не завжди і не на всі елементи. Експериментуючи, можна досягти бажаного результату. Тривіальне завдання: як прибрати відступ зверху, CSS який завжди вирішує тривіальним чином.
У деяких випадках, коли доводиться верстати елементи сторінки в надрах будь-якої популярної системи управління контентом сайту, необхідно все ж таки приділити увагу не тільки експериментальній практиці, а й подивитися досвід колег.
Опис
Встановлює величину відступу правого краю елемента. Відступом є відстань від зовнішнього краю правого кордону поточного елемента до внутрішнього кордону батьківського елемента (рис. 1).
Синтаксис
margin-right: значення auto | inherit
Значення
Величину правого відступу можна вказувати у пікселах (px), відсотках (%) або інших допустимих для CSS одиницях. Значення може бути як позитивним, і негативним числом.
Auto Вказує, що розмір відступів буде автоматично розрахований браузером. inherit Наслідує значення батька.
HTML5 CSS2.1 IE Cr Op Sa Fx
Результат цього прикладу показано на рис. 2.
Мал. 2. Застосування якості margin-right
Об'єктна модель
document.getElementById("elementID ").style.marginRight
Браузери
Браузер Internet Explorer 6 подвоює значення лівого чи правого відступу для плаваючих елементів, вкладених у батьківські елементи. Подвоюється той відступ, який прилягає до сторони батька. Проблема зазвичай вирішується додаванням display: inline для плаваючого елемента.
Internet Explorer до версії 7.0 включно не підтримує значення inherit.
Опис
CSS властивість margin-top встановлює зовнішній відступ зверху елемента. Відступом є відстань від зовнішнього краю верхньої межі поточного елемента до внутрішньої межі його батьківського елемента чи межі елемента, розташованого з нього. Зверніть увагу, що для малих елементів (display : inline;) можуть бути встановлені тільки зовнішні відступи з лівого та з правого боку.
Розмір зовнішнього верхнього відступу можна вказувати в пікселях (px), відсотках (%) або інших одиницях вимірювання CSS . Значення може бути як позитивним, і негативним.
Примітка: нижній або верхній зовнішній відступ дочірнього елементаможе впливати на загальну висоту батьківського елемента, якщо не заданий фіксований розмір висоти.
Об'єднання полів
- Поля сестринських елементів, які розташовані один під одним і які знаходяться в потоці документа, об'єднуються в одне спільне. Висота отриманого поля дорівнює висоті більшого із двох полів, наприклад: поле верхнього елемента(margin-bottom) складає 10px, а нижнього елемента (margin-top) - 20px, єдине поле в цьому випадку буде висотою 20px.
- Об'єднання полів батьківського та дочірнього елемента, що знаходяться в потоці документа, відбувається, якщо батьківський елемент не має нічого з того, що могло б відокремлювати його зовнішній відступ від зовнішнього відступу дочірнього елемента (рамки, внутрішнього відступу або рядкового вмісту). Також поєднання полів не відбуватиметься, якщо батьківському елементу встановити властивість overflow зі значенням hidden або auto . Плюс від цього способу полягає в тому, що розмір батьківського елемента не збільшується.
Блокова верстка часто використовується при створенні сайту чи блогу. Як наслідок — часто потрібно робити відступи у блоків. З цієї причини про те, як зробити відступи в 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 — зовнішні відступи. Також, як ви вже знаєте, способів завдання відступів існує кілька, їх можна використовувати.
