' marginaali yläosa ”-ominaisuus auttaa monia kehittäjiä luomaan responsiivisia asetteluja ja sijoittamaan HTML-elementtejä. Margin-top-ominaisuuden käyttö tarjoaa paremman hallinnan HTML-elementteihin, lisää visuaalista erottelua ja auttaa luomaan paremmin reagoivia malleja. Tämä opas esittelee marginaalin yläosan ominaisuuden käytännön toteutuksella CSS:ssä.
- Mikä on 'margin-top' -ominaisuus?
- Käytä 'margin-top'-ominaisuutta, jolla on positiivinen arvo
- Käytä 'margin-top' -ominaisuutta negatiivisella arvolla
Mikä on 'margin-top' -ominaisuus?
' marginaali yläosa ” -ominaisuutta käytetään lisätilan luomiseen HTML-elementtien väliin. Se voidaan asettaa sekä positiivisilla että negatiivisilla arvoilla. Nämä arvot asetetaan suunnittelun tarpeiden mukaan ja auttavat estämään päällekkäisyyksiä ja säätämään HTML-elementtien väliä.
Kuinka käyttää 'margin-top' -omaisuutta positiivisella arvolla?
'Margin-top'-ominaisuus, jolla on positiivinen arvo, lisää ylimääräistä välilyöntiä ylhäältä kohti valitun HTML-elementin keskustaa. Annettu arvo voi olla pikseleinä, prosentteina, rem tai globaaleina arvoina, kuten auto, inherit, unset jne. Käydään läpi esimerkki, jotta ymmärrät paremmin:
Esimerkki: Positiivisen arvon hyödyntäminen
Oletetaan HTML-tiedosto, joka luo ' Kun olet luonut HTML-rakenteen, käytä CSS-ominaisuuksia ' positiivinen ”luokka: Yllä olevassa koodinpätkässä: Yllä olevan koodinpätkän suorittamisen jälkeen verkkosivu näyttää tältä: Yllä oleva gif havainnollistaa marginaalin yläosan arvon asettamisen vaikutusta verkkosivulle. ' marginaali yläosa ” -ominaisuus negatiivisella arvolla asettaa ylimääräisiä välilyöntejä sivun yläreunasta keskustaa vastapäätä tai sivun ulkopuolelle suhteessa valittuun HTML-elementtiin. Sitä käytetään enimmäkseen päällekkäisten tehosteiden luomiseen tai HTML-elementin sijoitteluun. Käydään läpi esimerkki ymmärtääksemme paremmin. Esimerkki: Negatiivisen arvon hyödyntäminen Oletetaan HTML-tiedosto, joka luo ' Yllä mainitun koodinpätkän kuvaus on kuvattu alla: Yllä olevan koodinpätkän suorittamisen jälkeen verkkosivu näyttää tältä: Yllä oleva gif näyttää vaikutuksen verkkosivun suunnitteluun asettamalla marginaalin yläosan ominaisuuden negatiivisen arvon. ' marginaali yläosa ” -ominaisuutta käytetään lisätilan luomiseen HTML-elementtien väliin. Se voidaan asettaa sekä positiivisilla että negatiivisilla arvoilla. Jos margin-top-ominaisuudelle on määritetty positiivinen arvo, ylimääräinen tila lisätään verkkosivun tai valitun HTML-elementin keskustaan. Jos arvo on 'negatiivinen', välilyönti lisätään sivun ulkopuolelle. Tämä artikkeli osoittaa, mikä on marginaalin yläosan ominaisuus CSS:ssä.
< kehon >
< div luokkaa = 'positiivinen' >
< s > Marginaali yläosa positiivisella arvolla on määritetty s >
div >
kehon >
< tyyli >
.positiivinen {
leveys: 300px;
korkeus: 200px;
taustaväri: metsänvihreä;
fontin koko: 20px;
väri: #F F F;
marginaali-yläosa: 50px;
}
tyyli >
Kuinka käyttää 'margin-top' -omaisuutta negatiivisella arvolla?
.negatiivinen {
väri valkoinen;
tekstin tasaus: keskellä;
taustaväri: punainen ;
marginaali yläosa: -30 kuvapistettä ;
täyte: 30px;
korkeus: 100px;
}
tyyli >
< kehon >
< div luokkaa = 'negatiivinen' >
Negatiivinen arvo on määritetty varten Margin-top omaisuus
div >
kehon >
Johtopäätös