Andra P žurnāls

Šis ir mans pirmais mēģinājums rakstīt šāda veida tekstus, tāpēc esiet
saudzīgi, vēl tikai mācos. Un jā - laipni aicināti komentēt.

Piezīme: šajā tekstā latviskais vārds “mala” ir lietots kā angliskais “margin”.
Lasot tekstu, nejauciet to ar “border”. Šie termini ir no box model definīcijas. Vairāk par pašu box model.

Apskatam šo piemēru:

HTML struktūra:

<div style="border: 1px solid black; background-color: #FFE9BB;">

    <p style="border: 1px solid gray; margin: 20px;">margin: 20px;</p>

    <p style="border: 1px solid gray; margin: 20px;">margin: 20px;</p>

</div>

Kā redzams, atstarpe starp abiem <p> elementiem ir 20px nevis,
kā varētu iedomāties, 20 + 20 jeb 40px. Šo CSS fīču sauc par margin collapsing
(malu sakļaušanās).

Ja diviem elementiem, kas atrodas secīgi viens aiz otra dokumenta plūsmā, ir
norādīti css margin atribūti (defaultais browsera stils arī skaitās), tad starp
tām vertikālajām malām, kas saskaras, uzvar lielākā un mazākā netiek ņemta vērā.
Piemēram, ja pirmajam elementam būtu
norādīts margin-bottom: 30px, bet otram margin-top: 20px;, tad vērā ņemts tiktu
tikai pirmā element margin-bottom. Horizontālajām (margin-left, margin-right)
malām šāda sakļaušanās īpašība nepiemīt.

Ja saskarošās malas ir vienādas, tad, loģiski, vērā ņemta
tiek vienalga kura no malām.

Lielākā daļa cilvēku, kas strādā ar CSS, noteikti jau ir pamanījuši šo
CSS īpatnību. Domāju, ka arī liela daļa ir saskārušies ar “gļukiem”,
kas, ja papētam tālāk, nemaz nav gļuki un arī ir pateicoties šai CSS īpašībai.

Lieta ir tāda, ka saskarošās malas sakļaujas ne tikai elementiem, kas seko viens
otram, bet arī elementiem, kas atrodas viens iekš otra (nested elements).
Nezinot par šo CSS īpatnību, apjukums reizēm garantēts. Piemēram:

<div style="background-color: #FFE9BB;">

    <p style="border: 1px solid gray; margin: 20px;">margin: 20px;</p>

    <p style="border: 1px solid gray; margin: 20px;">margin: 20px;</p>

</div>

Šis HTML attēlosies šādi:

It kā liekas, ka ap katru <p> elementu visapkārt būtu jābūt 20px malai,
bet tā nav. Kā redzams,
šeit <div> elementam ir atņemts css border propertijs.
Līdz ar to <div> elementa augšējā mala (atceramies, ka ar vārdu “mala”
domāts css margin nevis css border) saskaras ar pirmā <p> elementa
augšējo malu un tās sakļaujas. Tāpat arī <div> elementa apakšējā mala
saskaras ar otrā <p> elementa apakšējo malu un tās sakļaujas. <p> elementu
malas it kā izslīd ārpus <div> elementa robežām, jo tām nav nekā priekšā,
kas tās aizturētu.

Rezultātā <div> elementam tagad ir mala, kas vienāda ar iekšējo <p>
elementu malām.

Šāds pats efekts būs arī ar vairākiem nestētiem elementiem. Piemēram trijiem:

<div style="background-color: #FFE9BB;">

 <div style="background-color: #FFBF3C; margin: 20px;">

 	<div style="background-color: #3FAD38; margin: 20px;">margin: 20px;</div>;

 </div>

</div>

Rezultāts:

Lai šādā situācijā nepieļautu šādu malu sakļaušanos, tām
pa starpu ir kaut kas jānovieto. Viens no veidiem, ko jau redzējām, ir <div>
elementam norādot border propertiju. Otrs variants būtu <div> elementam norādot
padding. Tas arī atturētu iekšējo elementu malu izslīdēšanu ārpus iekļaujošā
elementa robežām, un novērstu malu sakļaušanos.

Piemērs:

<div style="padding: 1px; background-color: #FFE9BB;”>

    <p style=”border: 1px solid gray; margin: 20px;”>margin: 20px;</p>

    <p style=”border: 1px solid gray; margin: 20px;”>margin: 20px;</p>

</div>

Rezultāts:

Vai arī pieliekot klāt padding vairākiem nestētiem elementiem:

Tikai jāatceras, ka atstarpes tagad būs 20 + 1 jeb 21px.

Malu sakļaušanās nenotiek, ja kāds no iesaistītajiem elementiem ir pozicionēts
kā absolute (position: absolute), vai arī ir
pozicionēts ar float palīdzību (float: left, float: right).

Piemērs:

<div style="float: left; background-color: #FFE9BB;”>

    <p style=”border: 1px solid gray; margin: 20px;”>margin: 20px;</p>

    <p style=”border: 1px solid gray; margin: 20px;”>margin: 20px;</p>

</div>

Kas attēlosies šādi:

Vai arī ar position: absolute.

<div style="background-color: #FFE9BB; position: absolute;“>

    <p style=”border: 1px solid gray; margin: 20px;”>margin: 20px;</p>

    <p style=”border: 1px solid gray; margin: 20px;”>margin: 20px;</p>

</div>

Protams, katram šim variantam ir savi mīnusi, tāpēc, pirms kādu no tiem izmantot,
jāizvērtē situācija. Piem., ja nav svarīga pikseļu precizitāte, tad varam droši
lietot padding. Reizēm labi var iztikt ar float: left.

Paldies par uzmanību. :)