margin un padding ir īpašības, kas kontrolē atstarpes ap un iekšā elementos. To izpratne ir būtiska CSS izkārtojuma veidošanā.

CSS kastes modelis (Box Model)

Katrs HTML elements ir "kaste", kas sastāv no četriem slāņiem:

  1. Content — satura zona (teksts, attēli)
  2. Padding — iekšējā atkāpe (starp saturu un apmali)
  3. Border — apmale
  4. Margin — ārējā atkāpe (starp elementu un citiem elementiem)

Margin — attālums no elementa ārējās malas līdz blakus esošajam elementam.

Padding — attālums no elementa satura līdz tā apmales iekšējai malai.

Vērtību norādīšana

Abām īpašībām var norādīt 1 līdz 4 vērtības:

/* Visas puses vienādas */
margin: 20px;

/* Vertikāli | Horizontāli */
margin: 10px 20px;

/* Augša | Horizontāli | Apakša */
margin: 10px 20px 30px;

/* Augša | Labā | Apakša | Kreisā (pulksteņrādītāja virzienā) */
margin: 10px 20px 30px 15px;

Var norādīt arī katru pusi atsevišķi:

margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;

padding-top: 15px;
padding-bottom: 15px;

Elementa centrēšana ar margin

Bloka elementu ar noteiktu platumu var centrēt horizontāli, izmantojot auto vērtību sānu atkāpēm:

.konteiners {
width: 800px;
max-width: 100%;
margin: 0 auto; /* centrē horizontāli */
}

box-sizing

Pēc noklusējuma padding un border palielina elementa kopējo izmēru. Ar box-sizing: border-box paddings un apmale tiek ieskaitīti norādītajā platumā:

/* Ieteicams pievienot katra projekta sākumā */
*, *::before, *::after {
box-sizing: border-box;
}

Piemēram, ja elementam ir width: 300px un padding: 20px:

  • Bez border-box: kopējais platums = 340px (300 + 20 + 20)
  • Ar border-box: kopējais platums = 300px (saturs automātiski samazināts)

Apmales (border)

/* Saīsinātā forma: platums stils krāsa */
border: 2px solid #333;

/* Tikai viena puse */
border-bottom: 3px solid #3498db;

/* Noapaļotas apmales */
border-radius: 8px;
border-radius: 50%; /* pilnīgi apaļš */

Apmales stili: solid, dashed, dotted, double, none.

Ēnas (box-shadow)

/* box-shadow: x-nobīde y-nobīde izplūšana krāsa */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

/* Vairākas ēnas */
box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1);