Margin

от Fuedo - Уеб дизайн енциклопедия

Направо към: навигация, търсене

Свойството margin позволява да се задава отстояние на даден елемент от останалите елементи, като отстоянието се измерва спрямо рамката. Задава се и на блокови и на инлайн елементи, но когато се зададе на инлайн елементи само хоризонтално отстояние е приложено, вертикалното се игнорира. Стойностите който свойството приема са: px, em, %, auto Броят на стойностите е от 1 до 4, като в зависимост от броят им се прилага margin на различни страни на елементът. Ако е зададена една стойност margin:10px;, 10px margin ще бъде приложен от всички страни на елемента. При 2 зададени стойности margin:10px 20px;, първата отговаря за вертикалното отстояние(отгоре и отдолу на елементът), а втората стойност за хоризонталното(отляво и отдясно). Ако зададете 3 стойности margin:10px 20px 30px;, тогава следите по часовниковата стрелка започвайки отгоре, първата стойност отговаря за горното отстояние, втората отговаря за дясното, третата за долното, а за четвъртата, лявата, се приема автоматично стойността на срещулежащата и стена (в случая дясната т.е. 20px). В последния възможен случай, с четири зададени стойности margin:10px 20px 30px 40px;, следваме горепосоченото правило, като задаваме стойности по часовниковата стрелка започвайки отгоре.

Възможна е комбинация на стойностите като например margin:auto auto 30px 40px;. Също така е въсможно да задавате отрицателни стойности, като по този начин можете да застъпвате елементи.

Някой хора бъркат margin с padding, разликата между тях е, че margin задава отстоянието от рамката до съседния елемент, докато padding определя отстоянието от съдържанието до рамката.

Сега да затвърдим наученото с един пример: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Transparency</title>
  <style type="text/css">
      #margin1{
        width:200px;
        height:100px;
        border:3px solid black;
        background:red;  
        margin:10px;      
      }
      #margin2{
        width:200px;
        height:100px;
        border:3px solid black;
        background:red;  
        margin:10px 20px;      
      }
      #margin3{
        width:200px;
        height:100px;
        border:3px solid black;
        background:red;  
        margin:10px 20px 30px;      
      }
      #margin4{
        width:200px;
        height:100px;
        border:3px solid black;
        background:red;  
        margin:10px 20px 30px 40px;      
      }
      .outer{
        border:3px solid #000;
        background:blue;
        padding:1px;
        width:600px;
      }
  </style>
</head>

<body>
    <div class="outer">
      <div id="margin1">       
      </div>        
    </div>
    <div class="outer">
      <div id="margin2">       
      </div>        
    </div>
    <div class="outer">
      <div id="margin3">       
      </div>        
    </div>
    <div class="outer">
      <div id="margin4">       
      </div>        
    </div>
</body>
</html>

Разгледайте добре примера.

Бележка: Погледнете статията за деформираният margin, защото това специално поведение в CSS понякога може да ви изненада неприятно.

Взето от „http://fuedo.com/index.php?title=Margin“.
Лични инструменти