Margin (apmale)
margin rezervē vietu, parasti norāda pikseļos px; (ārpus robežas(border)). Ļoti bieži
veidojot saskarni, CSS failā un CSS specifikācijās izmanto šito margin parametru, tādēļ
uzskatu, ka šis raksts būs noderīgs Jums!!!
Apmalei nav fona krāsas, tā ir pilnīgi caurspīdīga (transparent).
Augšējā margin-top, labajā margin-right, apakšējā margin-bottom, un kreisās malas
margin-left var mainīt patstāvīgi, izmantojot atsevišķas īpašības. Stenogrāfiju (saīsināto
pierakstu) īpašību arī var izmantot.
Iespējamās vērtības
| Value | Description |
|---|
| auto |
The browser calculates a margin, parlūkprogramma pati to aprēķina, pēc
noklusējuma tā arī ir, bet var to pašam norādīt |
| length |
Specifies a margin in px, pt, cm, etc. Default value is 0px, pēc noklusējuma ir
0px |
| % |
Specifies a margin in percent of the width of the containing element |
| inherit |
Specifies that the margin should be inherited from the parent element, elements
to manto no vecākiem(parent), šito parametru reti izmanto |
 |
Piezīme: To ir iespējams izmantot arī piemērojot negatīvas vērtības, piemēram
margin-right: -10px; kas pārklās saturu., šito iespēju neesmu izmantojis
|
|---|
margin - var piemērot, katrai elementa malai
atsevišķi (margin-left, margin-top,...)
CSS, ir iespējams noteikt dažādas starpības dažādām pusēm:
Piemērs
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
Pamēģini pats »
margin - stenogrāfijas (saīsinātais pieraksts)
īpašība
Saīsināt kodu, ir iespējams precizēt visas apmales īpašības vienā parametrā.
To sauc par saīsinājuma īpašību, piemēram : margin: 50px;, tas nozīmē, ka elementam
no visām pusēs būs apmale vienāda ar 50 pikseļiem!
margin apmales vērtība var būt no viena līdz četrām vērtībām.
Mans komentārs par šo pierakstu būs tāds, izmantojiet margin saīsināto
pierakstu, ja elementam no visām pusēm vēlaties izveidot apmali
margin: 10px; , ja plānojiet ka būš dažādas vērtības , tomēr iesaku
izmantot pierakstu, margin-left: 10px; margin-top: 40px; margin-right:
10px; margin-bottom: 40px; ,, tad jums būs vairāk skaidrības savā
kodā
- margin: 25px 50px 75px 100px;
- Augšējā robeža ir 25px
- labā mala ir 50px
- apakšējā robeža ir 75px
- kreisā mala ir 100px
- margin: 25px 50px 75px;
- Augšējā robeža ir 25px
- labais un kreisais starpība ir 50px
- apakšējā robeža ir 75px
- margin: 25px 50px;
- augšējā un apakšējā starpība ir 25px
- labais un kreisais starpība ir 50px
- margin: 25px;
- visi četri starpība ir 25px
Un man ir savs piemērs,
vienkārši iekopējiet to saturu, TryIt editorā un
apskatiet rezultātu, tad Jums būs vairāk skaidrības.
Piemērs
<!DOCTYPE html>
<html>
<head>
<style>
p
{
background-color:yellow;
}
p.margin
{
margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;
border: 1px solid green;
}
</style>
</head>
<body>
<p>This is a paragraph with no specified margins.</p>
<div style="border: 1px solid green;"></div>
<p class="margin">This is a paragraph with specified margins.</p>
<div style="border: 1px solid green;"></div>
</body>
</html>
Pamēģini pats »
Starpība property var būt no viena līdz četriem vērtībām.
Vairāk Piemēri
Noteikt augšējo robežu tekstu, izmantojot cm vērtību
Šis piemērs parāda, kā noteikt augšējo robežu tekstu, izmantojot cm vērtību.
Set apakšējo robežu tekstu, izmantojot procentu vērtību
Šis piemērs parāda, kā noteikts bottom starpību procentos, attiecībā pret platumu, kas satur elementu.
Visi CSS margin properties (parametri)
| Property | Description |
|---|
| margin |
A shorthand property for setting the margin properties in one declaration |
| margin-bottom |
Sets the bottom margin of an element |
| margin-left |
Sets the left margin of an element |
| margin-right |
Sets the right margin of an element |
| margin-top |
Sets the top margin of an element |
|
