Ce este proprietatea margin-top în CSS?

„ margine-top ” proprietatea îi ajută pe mulți dezvoltatori să creeze layout-uri receptive și să poziționeze elemente HTML. Utilizarea proprietății „margin-top” oferă mai mult control asupra elementelor HTML, adaugă separare vizuală și ajută la crearea de design-uri mai receptive. Acest ghid demonstrează proprietatea margin-top cu implementare practică în CSS.

Ce este proprietatea „margin-top”?
Utilizați proprietatea „margin-top” cu o valoare pozitivă
Utilizați proprietatea „margin-top” cu o valoare negativă

Ce este proprietatea „margin-top”?

„ margine-top ” este utilizată pentru a crea spațiu suplimentar între elementele HTML. Poate fi setat atât cu valori pozitive, cât și cu valori negative. Aceste valori sunt setate în funcție de nevoile designului și ajută la prevenirea suprapunerii și ajustarea distanței dintre elementele HTML.

Cum să utilizați proprietatea „margin-top” cu o valoare pozitivă?

Proprietatea „margin-top” cu o valoare pozitivă adaugă spațiere suplimentară de la poziția de sus spre centrul elementului HTML selectat. Valoarea furnizată poate fi în pixeli, procentaj, rem sau în valori globale, cum ar fi auto, moștenire, unset etc. Să parcurgem un exemplu pentru o mai bună înțelegere:

Exemplu: Utilizarea valorii pozitive

Să presupunem un fișier HTML care creează un „

” etichetă și furnizează date false. Apoi, atribuiți „ pozitiv ” valoare pentru clasa elementului „div”:

< corp >
< div clasă = 'pozitiv' >
< p > Marja de sus este atribuită cu o valoare pozitivă p >
div >
corp >

După crearea structurii HTML, aplicați proprietățile CSS la „ pozitiv ” clasa:

< stil >
.pozitiv {
latime: 300px;
înălțime: 200px;
culoare de fundal: verde pădure;
dimensiunea fontului: 20px;
culoare: #fff;
margine-sus: 50px;
}
stil >

În fragmentul de cod de mai sus:

Mai întâi, setați valorile „ 300px ' și ' 200px ” la CSS ” lăţime ' și ' înălţime ” proprietăți, respectiv.
În continuare, „ culoare de fundal ”, “ marimea fontului ', și ' culoare „Proprietățile CSS sunt utilizate pentru o mai bună vizualizare.
În cele din urmă, valoarea „50px” este furnizată pentru „ margine-top ” proprietate pentru a adăuga spațiu suplimentar.

După executarea fragmentului de cod de mai sus, pagina web arată astfel:

Gif-ul de mai sus ilustrează efectul setării valorii proprietății margin-top pe pagina web.

Cum să utilizați proprietatea „margin-top” cu o valoare negativă?

„ margine-top ” proprietate cu o valoare negativă setată spațiere suplimentară din poziția de sus opusă centrului sau spre exteriorul paginii în raport cu elementul HTML selectat. Este folosit mai ales pentru a crea efecte de suprapunere sau în poziționarea elementului HTML.

Să parcurgem un exemplu pentru o mai bună înțelegere.

Exemplu: Utilizarea valorii negative

Să presupunem un fișier HTML care creează un „

” etichetă și furnizează date false. Apoi, atribuiți „ negativ ” valoare pentru clasa elementului „div”:

< stil >
.negativ {
culoare albă;
text-align: centru;
culoare de fundal: roșu ;
margin-top: -30px ;
umplutură: 30px;
înălțime: 100px;
}
stil >
< corp >
< div clasă = 'negativ' >
Se atribuie valoarea negativă pentru Proprietate cu marginea superioară
div >
corp >

Descrierea fragmentului de cod menționat mai sus este descrisă mai jos:

În primul rând, „ negativ ” este selectată în interiorul “ ” pentru a aplica stilul CSS.
Apoi, setați valorile „ 220px ' și ' roșu ” la CSS ” lăţime ' și ' culoare de fundal ” proprietăți pentru crearea unor diferențe de vizualizare mai bune.
Apoi, setați valoarea „ -30px ” la CSS ” margine-top ” proprietate.
După aceea, creați un „
” etichetați și atribuiți-i o clasă de „ negativ ”. De asemenea, furnizați date fictive pentru elementul HTML div.

După executarea fragmentului de cod de mai sus, pagina web apare astfel:

GIF-ul de mai sus afișează efectul care are loc asupra designului paginii web prin setarea valorii negative pentru proprietatea margin-top.

Concluzie

„ margine-top ” este utilizată pentru a crea spațiu suplimentar între elementele HTML. Poate fi setat atât cu valori pozitive, cât și cu valori negative. Dacă proprietatea „margin-top” este atribuită cu o valoare pozitivă, atunci spațiul suplimentar este adăugat spre centrul paginii web sau al elementului HTML selectat. În cazul unei valori „negative”, spațiul este adăugat dar spre exteriorul paginii. Acest articol demonstrează ce este proprietatea margin-top în CSS.

Ce este proprietatea margin-top în CSS?