Margin и Padding: Създаване на пространство около елементите

CSS Margin and Padding

Най-разпространените CSS стилове за създаване на пространство около HTML елементи са Margin и Padding. Почти всеки елемент създаван по уеб страницата се нуждае от някакво разграничение от другите елементи. Дори обикновени линкове ще бъдат долепени един до друг, ако не се използва пространствено стилизиране. И двата стила имат свойства за настройка на пространството от всяка една страна на елемента. Те са обозначени с top, right, bottom, и left.

Margin

CSS Margin е стил за оставяне на място около дадени елементи с ясна граница. CSS Margin работи извън пределите на HTML обекта. Ако имаме даден HTML tag < div >, който е долепен до друг даден HTML tag < div >, CSS margin-right на първия елемент ще даде отстояние от втория елемент.

Полетата, с които се огражда всяка страна на обекта са:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

За спестяване на редове в CSS кода, може да се използва и съкратена версия на Margin. В такъв случай, „margin: 0 5px 5px 10px“, ще означава оставяне на отстояние на обекта от другите – 0px отгоре, 5px отдясно, 5px отдолу и 10px отляво. Следи се винаги по часовниковата стрелка top, right, bottom, и left. Отрицателните стойности могат да повдигнат един елемент, който ще излезе от границите си. Горен Margin със стойност -10px, ще повдигне елемента с 10px нагоре.

С отрицателните стойности трябва да се внимава, за да няма спречкване с други елементи. Изчисленията трябва да се спазват правилно, за да може в покритите елементи съдържанието да е достъпно.

CSS Margin

Margin свойството може да има и три стойности, като при „margin: 25px 50px 75px“, top margin е 25px, right и left margins са по 50px и bottom margin е 75px. Когато са две стойности се изписва „margin: 25px 50px“, следователно горното и долното отстояние са по 25px, а страничните – ляво, дясно са по 50px.

Има една много специфична стойност, която може да центрира елементите хоризонтално в своя container. При зададен „margin: auto“ с фиксирана широчина например „width: 300px“, елементът ще вземе предвид зададената ширина, а останалото пространство ще бъде разделено по равно между лявото и дясното поле.

Padding

Лесно може да объркате CSS Padding със CSS Margin. Важно е да се знае, че CSS Padding прави отстояние от съдържанието до външните му ъгли. Или общо казано отстоянието се случва вътре в HTML елемента. Даден HTML tag < div > има зададен текст, но ние сме го оцветили с цветен фон, без Padding текста ще е долепен до ръбовете на самия див. В такъв случай „padding: 10px“ ще направи елемента по-голям с 10px от всяка страна на HTML тага.

Това също е особеност на вътрешното отстояние. Елементите стават по-големи при използването на CSS Padding. Отрицателни стойности не са разрешени. Ако ви се случи да използвате Padding -10px, той няма да бъде зачетен.

CSS Padding

Полетата, с които всяка страна на обект получава вътрешно отстояние:

  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Както при свойството Margin, CSS Padding може да се изписва с по четири, три, две или една стойност. Както споменах, елементите със зададен padding уголемяват размера си дори да имат зададен „width: 300px“. Свойството CSS width указва ширината на съдържанието на обекта. Площта на съдържанието е част вътре в падинга, границите и марджина на даден елемент.

Така че, ако даден HTML елемент има зададена ширина, добавеният към него padding ще бъде добавен към общата ширина на елемента. При „width: 300px“ и добавен „padding: 25px“ широчината на елемента ще стане 350px. Ако все пак това не ни допада, може да използваме свойството box-sizing, това кара елемента да запази ширината си.