Tutorialul va acoperi două aspecte: marginile exterioare și padding-ul exterior.
Să începem cu marginile exterioare. Pentru un element p definit direct în cadrul elementului body, specificațiile pentru marginea stângă și dreaptă a ferestrei reprezintă distanța față de marginile exterioare ale elementului body. Dacă urmează mai multe paragrafe unul după altul, specificațiile pentru marginile exterioare de sus și de jos reprezintă distanța între paragrafele individuale.
În ceea ce privește definirea marginilor exterioare și a padding-urilor, sunt posibile și valori negative, care pot duce la suprapuneri.
Stabilirea marginii exterioare
Marginile și padding-urile reprezintă spațiul gol forțat între elementul curent și elementul său părinte sau vecin. Proprietățile CSS utile în elementele HTML care creează un paragraf propriu sau formează un bloc sunt următoarele.
În cazul proprietății margin, aceasta este forma scurtă a celor patru proprietăți margin-top, margin-right, margin-bottom și margin-left. Iată valorile posibile:
• auto – marginea exterioară este calculată automat.
• Procentaj – se referă la elementul pentru care este specificat margin-ul.
• Lungime – sunt permise și valori negative. Astfel, elementele pot fi suprapuse.
Sunt permise până la patru valori:
• o valoare – marginea exterioară de sus, jos, stânga și dreapta
• două valori – prima valoare pentru marginea de sus și de jos, a doua valoare pentru marginea din dreapta și stânga
• trei valori – prima valoare pentru marginea de sus, a doua valoare pentru marginile din dreapta și stânga, a treia valoare pentru marginea de jos
• patru valori – prima valoare pentru marginea de sus, a doua pentru marginea din dreapta, a treia pentru marginea de jos, a patra pentru marginea din stânga.
Exemplul următor arată utilizarea proprietăților generale margin:
<!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>Construirea unui sistem de camere</p>
<p class="ex">În acest curs video vei afla cum să creezi un sistem de camere și cum să-l deplasezi în siguranță prin spațiul in 3D. Un fișier de proiect este inclus.</p>
</body>
</html>
În acest exemplu au fost definite două paragrafe de text.
De asemenea, celui de-al doilea paragraf i s-au atribuit margini.
margin: 30px 50px 30px 50px;
Această specificație înseamnă următoarele:
• 30 pixeli distanță în sus
• 50 pixeli distanță la dreapta
• 30 pixeli distanță în jos
• 50 pixeli distanță la stânga
Specificarea marginilor individuale
Mai devreme a fost prezentată specificarea generală a proprietății margin. Puteți, totuși, face și specificări individuale. Prin următoarele proprietăți, se poate determina distanța de la marginea de sus, stânga, jos sau dreapta a unui element.
• margin-top – marginea/ distanța exterioară de sus
• margin-right – marginea/ distanța exterioară din dreapta
• margin-bottom – marginea/ distanța exterioară de jos
• margin-left – marginea/ distanța exterioară din stânga
La toate cele patru proprietăți pot fi utilizate următoarele valori:
<!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>Construirea unui sistem de camere</p>
<p class="ex">În acest curs video vei afla cum să creezi un sistem de camere și cum să-l deplasezi în siguranță prin spațiul in 3D. Un fișier de proiect este inclus.</p>
</body>
</html>
Rezultatul în browser arată astfel:
Stabilirea padding-ului interior
La padding se referă spațiul gol dintre conținutul elementului și marginea sa proprie. Proprietățile CSS utile în elementele HTML care creează un paragraf propriu sau formează un bloc sunt următoarele.
Prin padding, se face referire la forma scurtă a celor patru proprietăți padding-top, padding-right, padding-bottom și padding-left. Aici se poate defini lățimea dintre chenar și conținutul unui element, adică padding-ul.
• Procentaj – se referă la elementul părinte.
• Lungime
Pot fi specificate până la patru valori fiecare:
• o valoare – padding-ul de sus, jos, stânga și dreapta
• două valori – prima valoare pentru padding-ul superior și inferior, a doua valoare pentru padding-ul din dreapta și stânga
• trei valori – prima valoare pentru padding-ul superior, a doua valoare pentru padding-ul din dreapta și stânga, a treia valoare pentru padding-ul inferior
• patru valori – prima valoare pentru padding-ul superior, a doua pentru padding-ul din dreapta, a treia pentru padding-ul inferior, a patra pentru padding-ul din stânga.
De asemenea, un exemplu pentru aceasta:
<!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>Construiți un rig de cameră</p>
<p class="ex">În acest videoclip de instruire veți afla cum să creați un rig de cameră și cum să-l deplasați în siguranță prin spațiul 3D. Un fișier de proiect este inclus.</p>
</body>
</html>Și aici este rezultatul în browser:
Prin intermediul celor patru proprietăți de padding puteți defini distanțele interioare. Următoarele patru proprietăți CSS sunt disponibile pentru aceasta:
• padding-top – Distanța între marginea superioară a conținutului și marginea superioară
• padding-bottom – Distanța între marginea inferioară a conținutului și marginea inferioară
• padding-left – Distanța între marginea stângă a conținutului și marginea stângă
• padding-right – Distanța între marginea dreaptă a conținutului și marginea dreaptă.
La toate cele patru proprietăți pot fi utilizate următoarele valori:
• Procentaj – se referă la elementul părinte
• Specificare a lungimii
