Відступ зверху CSS: позиціювання контенту

Верстка 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 не завжди вирішує тривіальним чином.

У деяких випадках, коли доводиться верстатиелементи сторінки в надрах якої-небудь популярної системи управління контентом сайту, необхідно все ж приділити увагу не тільки експериментальної практиці, а й подивитися досвід колег.</ Span </ p>