Ultimele tutoriale de dezvoltare web
 

CSS Margini

❮ Anterior Urmatorul capitol ❯

CSS Margin Proprietăți

CSS - margin proprietăți sunt folosite pentru a genera spațiu în jurul valorii de elemente.

În margin proprietăți seta dimensiunea spațiului alb în apropierea hotarelor.

Acest element are o margin de 80px.

CSS Margins

CSS - margin proprietăți seta dimensiunea spațiului alb în apropierea hotarelor.

Note: La margins sunt complet transparente - și nu poate avea o culoare de fundal!

Cu CSS, aveți control deplin asupra margins . Există proprietăți CSS pentru stabilirea margin pentru fiecare parte a unui element (top, right, bottom, and left) .

Margin - Fețe individuale

CSS are proprietăți pentru specificarea margin pentru fiecare parte a unui element:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Toate margin de proprietăți pot avea următoarele valori:

  • auto - browser - ul calculeaza margin
  • Lungimea - specifica o margin in px, pt, cm , etc.
  • % - specifică o margin în% din lățimea elementului ce conține
  • moștenesc - specifică faptul că margin ar trebui să fie moștenită de la elementul părinte

Note: Este de asemenea posibil să se utilizeze valori negative pentru margins ; să se suprapună conținut.

Următorul exemplu stabilește diferite margins pentru toate cele patru laturi ale unui <p> Element:

Exemplu

p {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 80px;
}
Încearcă - l singur »

Următorul exemplu permite stânga margin să fie moștenită de la elementul de bază:

Exemplu

div.container {
    border: 1px solid red;
    margin-left: 100px;
}

p.one {
    margin-left: inherit;
}
Încearcă - l singur »

Margin - Proprietatea stenografie

Pentru a scurta codul, este posibil să se specifice toate margin de proprietăți într - o singură proprietate.

margin de proprietate este o proprietate prescurtare pentru următoarele individuale margin de proprietăți:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

Exemplu

p {
    margin: 100px 150px 100px 80px;
}
Încearcă - l singur »

Deci, iată cum funcționează:

În cazul în care margin de proprietate are patru valori:

  • margin : 25px 50px 75px 100px;
    • marginea de sus este 25px
    • marginea din dreapta este 50px
    • marginea de jos este 75px
    • marginea din stânga este 100px

În cazul în care margin de proprietate are trei valori:

  • margin : 25px 50px 75px;
    • marginea de sus este 25px
    • Marginile din dreapta și din stânga sunt 50px
    • marginea de jos este 75px

În cazul în care margin de proprietate are două valori:

  • margin : 25px 50px;
    • marginile de sus și de jos sunt 25px
    • Marginile din dreapta și din stânga sunt 50px

În cazul în care margin de proprietate are o singură valoare:

  • margin : 25px;
    • toate cele patru margini sunt 25px

Utilizarea The auto Valoare

Puteți seta margin de proprietate pentru auto la centru pe orizontală a elementului în interiorul containerului său.

Elementul va lua apoi la lățimea specificată, iar spațiul rămas va fi împărțit în mod egal între stânga și dreapta margins :

Exemplu

div {
    width: 300px;
    margin: auto;
    border: 1px solid red;
}
Încearcă - l singur »

Testați-te cu exerciții!

Exercițiul 1 » Exercițiul 2» Exercițiul 3 » Exercițiul 4»

Toate proprietățile CSS Margine

Proprietate Descriere
margin O proprietate prescurtare pentru stabilirea margin de proprietăți într - o singură declarație
margin-bottom Setează partea de jos margin unui element
margin-left Setează stânga margin unui element
margin-right Setează dreapta margin unui element
margin-top Setează partea de sus margin unui element

❮ Anterior Urmatorul capitol ❯