Šajā pamācības materiālā tiks runāts par diviem jautājumiem: ārējām atstatēm un ārējiem malām.
Sāksim ar ārējiem atstarpēm. p elementam, kas norādīts tieši iekš body, norādījumi par kreiso un labo loga malu attiecas uz attālumu līdz body elementa ārējiem galiem. Uz pēc kārtas sekojošiem rindkopiem, norādījumi par ārējo malu augšpusē un apakšpusē attiecas uz attālumu starp atsevišķām rindkopām.
Definējot ārējos atstarpes un malas, ir arī iespējams izmantot negatīvas vērtības, kas ļauj sasniegt pārklāšanos.
Iestatīt ārējo atkāpi
Ārējā mala un atstarpe ir piespiedu tukša vieta starp pašreizējo elementu un tā vecāku vai blakuselementu. Jēgpilnas ir šādas CSS īpašības HTML elementos, kas izveido paši savu rindkopu vai bloku.
Ar margin ir īsais veids, kā definēt četras īpašības margin-top, margin-right, margin-bottom un margin-left. Šajā gadījumā iespējamās šādas vērtības:
• auto – ārējais atstarps tiek aprēķināts automātiski.
• Procentuālā norāde – attiecas uz elementu, kam ir norādīts atstarpe.
• Garuma norāde – arī negatīvas vērtības ir atļautas. Tas ļauj elementiem pārklāties.
Atļautas līdz četrām vērtībām:
• viena vērtība – ārējais atstarps augšā, lejā, pa labi un pa kreisi
• divas vērtības – pirmā vērtība augšas un apakšas ārējam atstarpei, otra vērtība labās un kreisās ārējās atstarpes
• trīs vērtības – pirmā vērtība augšas ārējam atstarpei, otra vērtība kreisās un labās ārējās atstarpes, trešā vērtība apakšas ārējā atstarpe
• četras vērtības – pirmā vērtība augšas ārējam atstarpei, otra vērtība pa labi, trešā lejā un ceturta kreisā.
Nākamais piemērs parāda vispārējo margin īpašību izmantošanu:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8>
<style>
p {
background-color: yellow;
}
p.ex {
margin: 30px 50px 30px 50px;
background-color:#FF99FF;
</style>
</head>
<body>
<p>Izveidot kameru-Rig</p>
<p class="ex">Šajā video apmācībā tu uzzināsi, kā izveidot kameru-Rig un droši pārvietot to 3D telpā. Projekta fails ir pieejams.</p>
</body>
</html>
Šajā piemērā tika definētas divas teksta rindkopas.
Otrajam rindkopam tika piešķirti arī atstarpes.
margin: 30px 50px 30px 50px;
Šis norādījums nozīmē sekojošo:
• 30 pikseļi attālums augšā
• 50 pikseļi attālums pa labi
• 30 pikseļi attālums lejā
• 50 pikseļi attālums pa kreisi
Atsevišķas norādes attālumiem
Iepriekš tika iepazīstina ar vispārējo margin norādi. Tomēr iespējams arī veikt atsevišķas norādes. Izmantojot tās, var noteikt attālumu no augšas, kreisās, apakšas vai labās lapas malas, šādā veidā nosakot attālumu.
• margin-top – ārējā mala/atstarpe augšā
• margin-right – ārējā mala/atstarpe pa labi
• margin-bottom – ārējā mala/atstarpe lejā
• margin-left – ārējā mala/atstarpe pa kreisi
Pie visām četrām īpašībām var izmantot sekojošās vērtības:
• auto – ārējais atstarps tiek aprēķināts automātiski.
• Procentuālā norāde – attiecas uz elementu, kuram tika norādīta margin- [top, right, bottom, left].
• Garuma norāde – arī negatīvas vērtības ir atļautas. Tas ļauj elementiem pārklāties.
Nākamais piemērs parāda, kā efektīvi izmantot atsevišķās norādes.
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;
}
p.ex {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 50px;
}
</style>
</head>
<body>
<p>Izveidot kameru-Rig</p>
<p class="ex">Šajā video apmācībā tu uzzināsi, kā izveidot kameru-Rig un droši pārvietot to 3D telpā. Projekta fails ir pieejams.</p>
</body>
</html>
Pārlūkā rezultāts izskatās šādi:
Iestatīt iekšējo atkāpi
Iekšējā atstarpe ir piespiedu tukša vieta starp elementa saturu un paša elementa malu. Jēgpilnas ir šādas CSS īpašības HTML elementos, kas izveido paši savu rindkopu vai bloku.
Ar padding ir īsais veids, kā definēt četras īpašības padding-top, padding-right, padding-bottom un padding-left. Šādi definējot tiek nosakīta platums starp rāmi un elementa saturu, tātad iekšējā atstarpe.
• Procentuālā norāde – attiecas uz vecākelementu.
• Garuma norāde
Katrā no četrām vērtībām var norādīt līdz pat četrām:
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;}
p.ex {
padding-top: 25px;
padding-bottom: 25px;
padding-right: 50px;
padding-left: 50px;
}
</style>
</head>
<body>
<p>Uzstādīt kameru-Rig</p>
<p class="ex">Šajā video apmācībā tu uzzināsi, kā izveidot kameru-Rig un droši pārvietot to caur 3D telpu. Ir pieejams projekta fails.</p>
</body>
</html>Un šeit ir rezultāts pārlūkprogrammā:
Ar četrām padding-īpašībām var definēt iekšējos atstarpes. Pieejamās četras CSS īpašības ir sekojošas:
• padding-top – Atstārpe starp saturu un augšējo malu
• padding-bottom – Atstārpe starp saturu un apakšējo malu
• padding-left – Atstārpe starp saturu un kreiso malu
• padding-right – Atstārpe starp saturu un labo malu.
Visām četrām īpašībām var izmantot šādas vērtības:
• Procentuālā vērtība – attiecas uz vecākelementu
• Garuma vērtība
