Відступи в html документі

"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. " Абзац 1.10.32 "de Finibus Bonorum et Malorum", написаний Цицероном в 45 році н.е. "Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam , quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? " Англійська переклад 1914 року, H. Rackham "But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of the great explorer of the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resulta nt pleasure? " Абзац 1.10.33 "de Finibus Bonorum et Malorum", написаний Цицероном в 45 році н.е. "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. " Англійська переклад 1914 року, H. Rackham "On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they can not foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always holds in these matters to this principle of selection: he rejects pleasures to secure other greater pleasures, or else he endures pains to avoid worse pains. "

Привіт, шановні читачі блогу сайт! Сьогодні ми продовжимо вивчення каскадних таблиць стилів або CSS. У попередніх статтях ми вже розглянули в загальних рисах блочну верстку сайту. В результаті у нас стали виходити цілком професійні web-сторінки, але чогось їм не вистачає. А не вистачає їм скоріше за все відступів і рамок. Сьогодні ми і займемося розглядом стильових правил margin, padding і border, які дозволяють задавати відступи і рамки для html-елементів.

Параметри відступів в CSS

За допомогою каскадних таблиць стилів існує можливість задавати відступи двох видів.

1.внутрішній відступ- це відстань від уявної межі елементу до його вмісту. Величина відстані задається за допомогою параметра padding. Такий відступ належить самому елементу і знаходиться всередині нього.

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

Для наочності картинка:

Наприклад, розглянемо осередок заповнену текстом. Тоді внутрішній відступ це відстань між уявної кордоном осередки і містяться в ній текстом. А зовнішній відступ це відстань між кордонами сусідніх комірок. Почнемо з внутрішніх відступів.

Внутрішні відступи в CSS за допомогою padding (top, bottom, left, right)

Властивості стилю padding-left, padding-top, padding-right і padding-bottom дозволяють задати величини внутрішніх відступів, відповідно, ліворуч, зверху, праворуч і знизу елемента web-сторінки:

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

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

p.test (
padding-left: 20px;
padding-top: 5px;
padding-right: 35px;
padding-bottom: 10px
}

Збірне правило paddingдозволяє вказати відступи відразу з усіх боків елемента веб-сторінки:

padding:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

У збірному правилі дозволяється використовувати одне, два, три або чотири значення, поділяючи їх між собою пробілом. В цьому випадку ефект залежить від кількості значень:

якщо вказати одне значення, то воно встановить величину відступу з усіх боків елемента сторінки;
якщо вказати два значення, то перше задасть величину відступу зверху і знизу, а друге - ліворуч і праворуч;
якщо вказати три значення, то перше визначить величину відступу зверху, друге - ліворуч і праворуч, а третє - знизу;
якщо вказані чотири значення, то перше встановить величину відступу зверху, друге - справа, третє - знизу, а четверте - зліва.

Таким чином правило CSSнаведене вище можна максимально скоротити і записати наступним чином:

p.test (padding: 5px 35px 10px 20px)

Властивість margin або зовнішні відступи в CSS

Атрибути стилю margin-left, margin-top, margin-right і margin-bottom дозволяють задати величини зовнішніх відступів, відповідно, ліворуч, зверху, праворуч і знизу:

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

Величину відступу можна вказувати в пікселях (px), відсотках (%) або інших допустимих для CSS одиницях:

p (
margin-left: 20px;
}
h1 (
margin-right: 15%;
}

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

Як значення зовнішніх відступів допустимо застосовувати від'ємні величини:

p (
margin-left: -20px;
}

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

Зовнішні відступи ми також можемо вказати за допомогою атрибута стилю margin. Він задає величини відступу одночасно з усіх боків елемента web-сторінки:

margin:<отступ 1> [<отступ 2> [<отступ 3> [<отступ 4>]]]

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

Параметри рамки за допомогою властивості border

При налаштуванні рамок існує три типи параметрів:

border-width - товщина рамки;
border-color - колір рамки;
border-style - тип лінії за допомогою якої буде намальована рамка.

Почнемо з параметра товщини рамки:

border-width: [значення | thin | medium | thick] (1,4) | inherit

товщину рамкиможна задавати в пікселях, або в інших доступних в css одиницях. Змінні thin, medium і thick задають товщину рамки в 2, 4 і 6 пікселів відповідно:

border-width: medium;

Як і для властивостей padding і margin, для параметра border-width дозволяється використовувати одне, два, три або чотири значення, задаючи таким чином товщину рамки для всіх сторін відразу або для кожної окремо:

border-width: 5px 3px 5px 3px

Для поточного абзацу зробимо товщину верхньої рамки 1px, правою 2px, нижньої 3px, а лівої 4px за допомогою правила (border-width: 1px 2px 3px 4px;)

За допомогою атрибутів стилю border-left-width, border-top-width, border-right-width і border-bottom-width можна задавати товщину, відповідно, лівої, верхній, правій і нижній сторін рамки:

Наступний параметр border-color за допомогою якого можна управляти кольором рамки:

border-color: [колір | transparent] (1,4) | inherit

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

p (border-width: 2px; border-color: red)

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

За допомогою атрибутів стилю border-left-color, border-top-color, border-right-color і border-bottom-color можна задати колір, відповідно, лівої, верхній, правій і нижній сторін рамки:

І останній параметр border-style задає тип рамки:

border-style: (1,4) | inherit

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

Атрибути стилю border-left-style, border-top-style, border-right-style і border-bottom-style задають стиль ліній, якими буде намальована, відповідно, ліва, верхня, права і нижня сторона рамки:

Як і для параметрів зовнішніх і внутрішніх відступів, для рамки існує універсальне властивість border . Воно дозволяє одночасно встановити товщину, стиль і колір кордону навколо елемента:

border: | inherit

Значення можуть йти в будь-якому порядку, розділяючись пробілами:

td (border: 1px solid yellow)

Для установки кордону тільки на певних сторонах елементу існують властивості border-top, border-bottom, border-left, border-right, які дозволяють задати параметри відповідно для верхньої, нижньої, лівої і правої сторони рамок.

Залишилося тільки підвести підсумки:

для завдання внутрішніх відступівкористуємося властивістю padding;
для налаштування зовнішніх відступівіснує правило margin;
параметри рамокзадаються за допомогою атрибута border.

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

На цьому все, до нових зустрічей!

З появою властивостей управління відступами на 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-знизу.

Аня написала наступний код (приклад 1) і отримала сторінку, показану на рис. 1. Але Ані потрібно, щоб не було відступів між блоками, а також справа і зліва від блоків. Які зміни в код для цього потрібно внести?

Між заголовком і основним текстом занадто великий відступ, як його зменшити?

До абзацу (тег

) І заголовку (тег

) Автоматично додається верхній і нижній відступи, які в сумі і дають велику відстань між заголовком і текстом. Щоб зменшити величину відступу треба явно додати властивість margin-bottom до селектора H1. Причому можна встановити позитивне, нульове або від'ємне значення. Таким способом легко задавати бажане значення відступу.

Як мені для кожного абзацу додати відступ першого рядка?

Там, де необхідно встановити абзацний відступ, найкраще використовувати стильову властивість text-indent. Його значення визначає наскільки зрушити текст першого рядка вправо від початкового положення. Ширина текстового блоку при цьому не змінюється і залишається початково заданої. Величину відступу можна вказувати в пікселях, відсотках або інших доступних одиницях (приклад 1).

Як прибрати відступ зверху і знизу від списку?

Використовуйте стильова властивість margin-top (відступ зверху) і margin-bottom (відступ знизу) для селектора UL або OL, в залежності від типу списку. Також можна скористатися універсальним властивістю margin.

Як змінити відступи на веб-сторінці?

Відступи на веб-сторінці хоча і не видно, але не дозволяють вмісту щільно прилягати до країв вікна браузера, щоб забезпечувати комфортність читання. Своє власне значення відступів можна встановити, змінюючи значення властивості margin у селектора body.

Як прибрати відступи навколо форми?

При додаванні форми через тег

навколо неї зверху і знизу автоматично додаються відступи. Щоб їх прибрати, використовуйте стильова властивість margin з нульовим значенням, додаючи його до селектора FORM.

Як змінити відстань між абзацами тексту?

При використанні тега

Автоматично додаються відступи зверху і знизу від текстового абзацу. Це зроблено для того, щоб візуально відокремити один блок тексту від наступного. Зрозуміло, що значення відступів, які задані за замовчуванням, влаштовують не завжди, тому іноді їх доводиться зменшувати або збільшувати. Для цього можна використовувати універсальну властивість margin, воно визначає відступи з усіх сторін абзацу або margin-top для відступу зверху і margin-bottom - для відступу знизу.

Для більш красивого відображення елементів на 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 з усіх 4-ох сторін.

Припустимо, ви вирішили поставити ще картинку на сторінку, але для неї ви хочете змінити тільки зовнішній відступ зверху, а інші залишити як є. І для виконання цього завдання досить прописати class для цієї картинки, і додати в css додаткову запис.

У підсумку, додана вами картинка з класом verx прийме всі відступи прописані в css для тега img, і змінить тільки зовнішній відступ для верхньої сторони (в нашому випадку: 40px).

Я постарався зробити опис для відступів css більш детально, але якщо виникнуть питання задавайте їх через коментарі.