CSS граници

С командата margin може да се осигури празно пространство около даден елемент. Това пространство е безцветно и прозрачно и се разполага отвъд рамката (ако такава е указана) на елемента.

Размерът на границата може да се задава както индивидуално за четирите страни, така и съкратено - за всички наведнъж.

За стойности на свойството margin се използват:

• числа - със съответните мерни единици: px, pt, em и т.н.;
• проценти (%) - за основа се взема размерът на елемента;
• ключовата дума auto - резултатът зависи от това какви други стойности за граница са указани.

Индивидуални граници

Ето пример за задаване на индивидуални граници:

• margin-top: 20px;
• margin-right: 15px;
• margin-bottom: 10px;
• margin-left: 5px;

В този пример горната граница е 20 пиксела, дясната - 15, долната - 10 и лявата - 5 пиксела.

Опитай сам

Използване на съкратен запис

Можете да използвате съкратен запис на четирите граници по следния начин:

margin: 20px 15 px 10px 5px;

Когато след margin са указани 4 стойности, те се отнасят поред за горната, дясната, долната и лявата граница (движение по часовниковата стрелка). Margin може да се използва с три стойности:

margin: 20px 10px 5px;

В този случай първата и третата стойност се отнасят съответно за горната и долната граница, а средната стойност е еднаква за лявата и дясната граница.

Когато margin се използва само с две стойности, то първата стойност отразява горната и долната граница, а втората - лявата и дясната.

Естествено, можете да зададете всички граници да са равни: достатъчно е да укажете само една стойност:

margin: 25px;

Още няколко примера

За да центрирате един елемент в средата на страницата, можете да използвате ключовата дума auto по следния начин:

margin-left: auto;

margin-right: auto;

Дясно подравняване на елемент се постига със задаване на дясна граница с някаква числова стойност и auto за лявата граница:

margin-right: 1em;

margin-left: auto;