Kursy

Margines w CSS

Margines

Właściwość margin pozwala na określenie odstępu między poszczególnymi elementami strony. Możemy określić wartości każdej krawędzi z osobna lub przypisać wartości parami np, góra-dół, lewa-prawa. Aby lepiej zrozumieć marginesy wyobraź sobie, że Twoja strona zbudowana jest z różnych bloków. Powiedzmy, że jeden blok to tekst zawarty pomiędzy znacznikami <P></P>, a bloków takich może być na stronie kilka. Teraz przypiszemy każdemu blokowi nazwę np. <P CLASS="blok1">...</P>, <P CLASS="blok2">...</P>. Następnie w stylach określamy odpowiednie wartości każdemu z bloków np.


<STYLE TYPE="text/css">

P.blok1 {margin-right: 2px;}

P.blok2 {margin-top: 5px;}

</STYLE>

Otrzymamy jeden akapit (blok1) wcięty w prawo o dwa pixele i drugi (blok2) obniżony o 5 pixeli.

Oto spis elementów należących do Margin:
margin-left, -right, -top, -bottom długość np. 2em lub 2cm
wartość procentowa
auto		 określenie jednego z marginesów

 

Wypełnienie wokół elementu

Na początku może wydawać Ci się, że wypełnienie to, to samo co margines. Jednak nie. Margines określa odstęp jednego elementu od drugiego. Natomiast wypełnienie to obszar pomiędzy obramowaniem elementu a jego zawartością. Aby określić właściwości wypełnienia używamy elementu Padding.

Oczywiście styl z wykorzystaniem nie różny się od typowych formuł CSS. Najpierw podajemy selektor, któremu chcemy przypisać właściwość wypełnienia. Następnie określamy dowolną wartość elementu padding i gotowe.

W tym przykładzie posłużymy się wypełnieniem akapitu:


<HTML>

 
 <HEAD>

 
  <STYLE TYPE="text/css">

 
  P {padding: 8px; border: 1px; }

 
  </STYLE>

 
 </HEAD>

 
 <BODY>


  <P> Jakiś tekst Jakiś tekst Jakiś tekst Jakiś tekst Jakiś tekst Jakiś tekst Jakiś tekst Jakiś tekst Jakiś tekst

 
 </BODY>


</HTML>
Zobacz przykład: http://www.webinside.pl/materialy/rozne/p1_css5.htm

Tabela elementów i wartości PADDING:
padding dowolna długość
dowolna wartość procentowa
padding-left, -right, - top, -bottom dowolna długość
dowolna wartość procentowa

Na tym kończymy kolejną część kursu CSS poświęconej marginesom i wypełnieniom. Zapraszam do kolejnej części.