Margini CSS
Proprietățile CSS pentru margin creează spațiu în jurul unui element, în afara chenarului acestuia.
Marginile setează distanța dintre chenarul unui element și elementele din jurul lui.
CSS îți permite să setezi marginea pentru fiecare latură a unui element (sus, dreapta, jos, stânga), iar există o proprietate prescurtată pentru a le seta pe toate deodată.
Exemplu
Acest element are o margine de 70px pe fiecare latură.
<style>, dă unui <div> o margine de 70px și un chenar și un fundal vizibile, pentru ca spațiul din jurul lui să fie clar. Pune ceva text în interiorul div-ului.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
margin: 70px;
border: 1px solid #4CAF50;
background-color: lightblue;
}
</style>
</head>
<body>
<div>This element has a margin of 70px.</div>
</body>
</html>
Margin - laturi individuale
CSS are câte o proprietate pentru fiecare latură: margin-top, margin-right, margin-bottom și margin-left.
Toate proprietățile margin pot avea aceste valori:
auto— browserul calculează marginea.- o lungime — o margine în
px,pt,cmși așa mai departe. - un procent — o margine ca procent din lățimea elementului container.
inherit— marginea este preluată de la elementul părinte.
Sfat: Sunt permise valori negative.
Exemplu
Fiecare latură a paragrafului primește o margine diferită.
<style>, dă unui <p> margin-top 100px, margin-bottom 100px, margin-right 150px și margin-left 80px. Dă-i un chenar pentru ca marginile să fie vizibile. Adaugă un paragraf.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
margin-top: 100px;
margin-bottom: 100px;
margin-right: 150px;
margin-left: 80px;
border: 1px solid red;
}
</style>
</head>
<body>
<p>This paragraph has different margins on all four sides.</p>
</body>
</html>
Margin - proprietate prescurtată
Pentru a scurta codul, poți seta toate marginile într-o singură proprietate margin, care reprezintă margin-top, margin-right, margin-bottom și margin-left.
Numărul de valori schimbă laturile la care se aplică:
- Patru valori (
25px 50px 75px 100px): sus, dreapta, jos, stânga. - Trei valori (
25px 50px 75px): sus, apoi dreapta și stânga, apoi jos. - Două valori (
25px 50px): sus și jos, apoi dreapta și stânga. - O valoare (
25px): toate cele patru laturi.
Patru valori
Setează marginile de sus, dreapta, jos și stânga, în ordine.
<style>, dă unui <p> margin: 25px 50px 75px 100px (sus, dreapta, jos, stânga) și un chenar pentru ca marginile să se vadă. Adaugă un paragraf.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
margin: 25px 50px 75px 100px;
border: 1px solid red;
}
</style>
</head>
<body>
<p>Four values: 25px top, 50px right, 75px bottom, 100px left.</p>
</body>
</html>
Trei valori
Setează sus, apoi dreapta și stânga, apoi jos.
<style>, dă unui <p> margin: 25px 50px 75px (sus, dreapta și stânga, jos) și un chenar pentru ca marginile să se vadă. Adaugă un paragraf.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
margin: 25px 50px 75px;
border: 1px solid red;
}
</style>
</head>
<body>
<p>Three values: 25px top, 50px right and left, 75px bottom.</p>
</body>
</html>
Două valori
Setează sus și jos, apoi dreapta și stânga.
<style>, dă unui <p> margin: 25px 50px (sus și jos, apoi dreapta și stânga) și un chenar pentru ca marginile să se vadă. Adaugă un paragraf.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
margin: 25px 50px;
border: 1px solid red;
}
</style>
</head>
<body>
<p>Two values: 25px top and bottom, 50px right and left.</p>
</body>
</html>
O valoare
Setează aceeași margine pe toate cele patru laturi.
<style>, dă unui <p> margin: 25px (toate cele patru laturi) și un chenar pentru ca marginile să se vadă. Adaugă un paragraf.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
margin: 25px;
border: 1px solid red;
}
</style>
</head>
<body>
<p>One value: 25px on all four sides.</p>
</body>
</html>
Valoarea auto
Setează margin la auto pentru a centra elementul pe orizontală în containerul său. Elementul își păstrează lățimea setată, iar spațiul rămas este împărțit egal între marginile stângă și dreaptă.
Exemplu
Div-ul lat de 300px este centrat folosind margin: auto.
<style>, dă unui <div> o lățime de 300px, margin: auto și un chenar de 1px solid roșu. Div-ul trebuie să fie centrat în containerul său. Pune ceva text în interior.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
width: 300px;
margin: auto;
border: 1px solid red;
}
</style>
</head>
<body>
<div>This div is centered with margin: auto.</div>
</body>
</html>
Valoarea inherit
Setează margin la inherit pentru a prelua marginea de la elementul părinte.
Exemplu
Marginea stângă a paragrafului este moștenită de la div-ul său părinte.
<style>, dă unui <div> un chenar de 1px solid roșu și margin-left 100px. Dă unui paragraf cu clasa "ex1" margin-left: inherit, astfel încât copiază marginea stângă de la div-ul părinte. Pune paragraful în interiorul div-ului.
Rezultat: pagină HTML completă
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
border: 1px solid red;
margin-left: 100px;
}
p.ex1 {
margin-left: inherit;
}
</style>
</head>
<body>
<div>
<p class="ex1">This paragraph inherits its left margin from the parent div.</p>
</div>
</body>
</html>
Toate proprietățile CSS pentru margin
Un rezumat al proprietăților margin:
margin— setează toate marginile într-o singură declarație.margin-bottom— setează marginea de jos.margin-left— setează marginea din stânga.margin-right— setează marginea din dreapta.margin-top— setează marginea de sus.