Valters Celmiņš
© 2006 - 2011
Apmācība mājas lapu izveidē izmantojot xHTML 1.0 un CSS 2.1 valodas

Margin, Padding, Border - kas tie tādi?

Tās ir trīs savā starpā cieši saistītas CSS īpašības, kas saistītas ar elementu pozicionēšanu attiecībā vienam pret otru. Pirms stāstu par katru īpašību atsevišķi, vajadzētu saprast to kopīgo saikni. Kopīgā saikne šīm īpašībām ir elementa platums un augstums; jebkura no trim augstāk minētajām īpašībām tiešā veidā ietekmē elemeta gabarītus vai citu elementu attieksmi pret konkrētā elementa gabarītiem. Mēģināšu to attēlot grafiski:

Tie ir vienkāršotie modeļi, lai saprastu, kādas ir šo trīs īpašību attiecības vienam pret otru. Tagad piesiesim klāt tādas īpašības kā elementa reālais platums (width) un reālais augstums (width). Pilnais modelis izskatītos šādi (attēls ņemts no avota Wikipedia.org):

Apvienojot visu iepriekš izstāstīto, jāatceras tas, ka elements (piemēram, "divs") var tik norādīts ar vienu platumu un augstumu, tomēr var būt platāks vai augstāks, jo tā vizuālajam platumam tiek pievienotas īpašību padding un border vērtības. Parasti tas jāatceras brīžos, kad tiek veidoti karkasi. Šis ļoti bieži ir arī cēlonis dažādām kļūdām, kas saistītas ar objektu savstarpējo novietojumu. Paņemsim nelielu piemēru, lai nodemonstrētu, kā tas izskatās dzīvē:

HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Pirmā mājas lapa</title>
    <meta http-equiv="Content-Type" 
content="text/html;charset=utf-8" />
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <div class="test">
      <div id="container">
        1 2 3 4 5 6 7 8 9 0 
        1 2 3 4 5 6 7 8 9 0 
        1 2 3 4 5 6 7 8 9 0 
        1 2 3 4 5 6 7 8 9 0
      </div>
    </div>
  </body>
</html>>
CSS
* {margin: 0; padding: 0;}

div#container
{
 width: 100px;
 height: 100px;
 background-color: #F5F5F5;
 margin: 10px auto;
 padding: 10px;
 border: 5px solid black;
}

div.test {border: 1px solid red;}
Pārlūkā

Problēmas saistītas ar īpašībām margin, padding in border

Papildus jau tā "sarežģītajai dzīvei", ir kāds interneta pārlūks, kas "dzīvo pēc saviem noteikumiem"! Microsoft interneta pārlūks Internet Explorer ir tas, kas mājas lapu dizaineriem vienmēr sagādā kādas galvassāpes. Pat neskatoties uz to, ka Internet Explorer ir sava interpretācija augstāk minētajam modelim, tajā ir arī papildus daudz un dažādi (latviski izsakoties) "gļuki", kas bieži bojā mājas lapas izskatu.

Apskatot jau iepriekš minēto piemēru BEZ jebkādām modifikācijām pārlūkprogrammās Opera un Internet Explorer 6 (ko, par nožēlu, vēl jo projām izmanto gandrīz 10% pasaules iedzīvotāju), acīm redzama pārlūka Internet Explorer nespēja attēlot korektu saturu:

Pieraksts

Šiem elementiem ir vēl kas kopīgs: risināmās problēmas izkārtojums un sintakse. Jebkurš rāmītis sastāv no četrām malām: augša, apakša, labā un kreisā mala. Jebkuri attālumi no četrstūra veida objekta aprakstāmi četros virzienos: no augšas, no apakšas, no labās un no kreisās puses. Beigu beigās, visu var arī apvienot vienā! Tieši tāpēc ir iespējams pilnais, daļēji pilnais un dalējais pieraksts. Atkarībā no situācijas, var izmantot to, kas ērtāks!

Pilnais pieraksts.
Pilnajā pierakstā tiek atdalīta katra vienība atsevišķi, norādot tās pozīciju: augša, apakša, labais vai kreisais sāns. Piemēram:

div
{
 margin-top: 2px;     /* augša */
 margin-bottom: 3px;  /* apakša */
 margin-left: 4px;    /* kreisā */
 margin-right: 5px;  /* labā */

 padding-top: 2px;
 padding-bottom: 3px;
 padding-left: 4px;
 padding-right: 5px;

 border-top-width: 2px;   /* augšējā rāmja biezums */
 border-top-color: #000;  /* augšējā rāmja krāsa */
 border-top-style: none;  /* augšējā rāmja stils; none = nav! */
                          /* ... un pārējiem tādā pašā secībā */
 border-bottom-width: 3px;
 border-bottom-color: red;
 border-bottom-style: dashed;

 border-left-width: 4px;
 border-left-color: rgb(10,10,255);
 border-left-style: dotted;

 border-right-width: 5px;
 border-right-color: #FE7612;
 border-right-style: solid;
}

Ieguvums: var norādīt atsevišķu parametru īpašības. Trūkums: ļoti garš pieraksts, bieži - nepārskatāms.

Daļēji pilnais pieraksts.
Principā iespējams iegūt tieši to pašu, ko augšā atspoguļotajā piemērā, bet daudz īsākā pierakstā. To iespējams panākt apvienojot vienas īpašības parametrus noteiktā secībā. Doma sekojoša: norādīt vērtības sākot ar augšējo un pulksteņa rādītāja virzienā turpināt ar nākošajām. Piemērs, kā uzrakstīt visu to pašu, kas augšā, saīsinātā pierakstā:

div
{
 margin: 2px 3px 4px 5px; /* augša, labā, apakša, kreisā, tādā secībā! */

 padding: 2px 3px 4px 5px;

 border-width: 2px 3px 4px 5px;
 border-color: #000 red rgb(10,10,255) #FE7612;
 border-style: none dashed dotted solid;
}

Saīsinātais pieraksts.
Reti kad ir nepieciešams definēt atsevišķi katras malas īpašības, bet bieži ir nepieciešams definēt vienādas pretējo malu īpašības, t.i. augšu UN apakšu vienādus, labo UN kreiso pusi vienādu vai pat visas malas vienādas. Pieraksta princips visām trīs īpašībām saglabājas viens un tas pats. Protams, piemērs:

div
{
 margin: 2px auto 4px; /* augša = 2px, labā UN kreisā = auto, apakša = 4px, tādā secībā! */

 padding: 7px 3px; /* augša UN apakša = 7px, labā UN kreisā = 3px, tādā secībā! */

 border-width: 1px;   /* VISU malu biezums būs 1px, */
 border-color: #000;  /* VISU malu krāsa būs melna, */
 border-style: solid; /* VISU malu stils būs viendabīgs! */
}

Var pierakstīt pat vēl īsāk:

div
{
 margin: 10px;            /* Visapkārt atstarpe būs 10px, */
 padding: 5px;            /* visur iekšpusē atstarpe būs 5px, */
 border: 1px solid #000;  /* un visu malu izmērs, stils un krāsa (šādā secībā) būs vienāds! */
}

Pievērsiet uzmanību!

No šīm īpašībām nav iespējams izvairīties nevienā mājas lapā. Ir vērts tās ievērot un pasekot tām līdzi brīžos, kad kaut kas nav tā kā vajag, ja runa ir par izkārtojumu. Šīs īpašības parasti rada vistipiskākās problēmas, kas saistītas ar dizaina/izkārtojuma veidošanu mājas lapās: šis tas ne tur aizbīdījies, parādās nevajadzīgas spraugas vai vienkārši kaut kas "nelīmējas" kopā. Īpašu vērību pievērsiet pārlūkam Internet Explorer. Šī pārlūka bēdīgi slavenā vēsture ir pierādījusi, ka tas ir visneprecīzākais pārlūks tieši šo trīs īpašību attieksmju veidošanā. Es augstāk demonstrēju tikai pāris tā radītās neprognozējamās kļūdas, tomēr tādu nav mazums... un jo vecāka IE versija, jo lietas kļūst trakākas...