A ' margin-top ” tulajdonság sok fejlesztőnek segít a reszponzív elrendezések létrehozásában és a HTML-elemek elhelyezésében. A „margin-top” tulajdonság használata nagyobb szabályozást tesz lehetővé a HTML-elemek felett, vizuálisan elválasztja őket, és segít a jobban reagáló tervek létrehozásában. Ez az útmutató bemutatja a margin-top tulajdonságot a gyakorlati megvalósítással a CSS-ben.
- Mi az a „margin-top” ingatlan?
- Használja a „margin-top” tulajdonságot pozitív értékkel
- Használja a „margin-top” tulajdonságot negatív értékkel
Mi az a „margin-top” ingatlan?
A ' margin-top ” tulajdonság a HTML elemek közötti extra tér létrehozására szolgál. Pozitív és negatív értékekkel is beállítható. Ezek az értékek a tervezés igényei szerint vannak beállítva, és segítenek az átfedések elkerülésében és a HTML-elemek közötti távolság beállításában.
Hogyan kell használni a „margin-top” ingatlant pozitív értékkel?
A pozitív értékű „margin-top” tulajdonság extra szóközt ad a felső pozíciótól a kiválasztott HTML-elem közepe felé. A megadott érték lehet pixelben, százalékban, remben vagy globális értékekben, például auto, inherit, unset stb. Nézzünk meg egy példát a jobb megértés érdekében:
Példa: Pozitív érték hasznosítása
Tételezzünk fel egy HTML fájlt, amely létrehoz egy ' A HTML-struktúra létrehozása után alkalmazza a CSS-tulajdonságokat a „ pozitív ' osztály: A fenti kódrészletben: A fenti kódrészlet végrehajtása után a weboldal így néz ki: A fenti gif szemlélteti a margin-top tulajdonság értékének beállításának hatását a weboldalon. A ' margin-top ” tulajdonság negatív értékű extra térközt állít be a felső pozíciótól a középponttal szemben vagy az oldal külső része felé a kiválasztott HTML-elemhez képest. Leginkább átfedő effektusok létrehozására vagy a HTML elem pozicionálására használják. Vegyünk egy példát a jobb megértés érdekében. Példa: Negatív érték felhasználása Tételezzünk fel egy HTML fájlt, amely létrehoz egy ' A fent említett kódrészlet leírása az alábbiakban található: A fenti kódrészlet végrehajtása után a weboldal így jelenik meg: A fenti gif a margin-top tulajdonság negatív értékének beállításával megjeleníti a weboldal kialakítására gyakorolt hatást. A ' margin-top ” tulajdonság a HTML elemek közötti extra tér létrehozására szolgál. Pozitív és negatív értékekkel is beállítható. Ha a „margin-top” tulajdonsághoz pozitív érték van hozzárendelve, akkor az extra szóköz a weboldal vagy a kiválasztott HTML-elem közepe felé kerül hozzáadásra. „Negatív” érték esetén a szóköz hozzáadódik, de az oldal külseje felé. Ez a cikk bemutatja, mi a margin-top tulajdonság a CSS-ben.
< test >
< div osztály = 'pozitív' >
< p > Pozitív értékű margó teteje van hozzárendelve p >
div >
test >
< stílus >
.pozitív {
szélesség: 300 képpont;
magasság: 200 képpont;
háttérszín: erdőzöld;
betűméret: 20 képpont;
szín: #fff;
margó felső: 50 képpont;
}
stílus >
Hogyan kell használni a „margin-top” tulajdonságot negatív értékkel?
.negatív {
fehér szín;
szöveg igazítása: középre;
háttérszín: piros ;
margin-top: -30 képpont ;
padding: 30px;
magasság: 100 képpont;
}
stílus >
< test >
< div osztály = 'negatív' >
A negatív érték hozzá van rendelve számára Margin-top tulajdonság
div >
test >
Következtetés