Čo je vlastnosť na vrchu okraja v CSS?

Co Je Vlastnost Na Vrchu Okraja V Css



' margin-top Táto vlastnosť pomáha mnohým vývojárom pri vytváraní responzívnych rozložení a umiestňovaní prvkov HTML. Použitie vlastnosti „margin-top“ poskytuje väčšiu kontrolu nad prvkami HTML, pridáva vizuálne oddelenie a pomáha vytvárať lepšie responzívne návrhy. Táto príručka ukazuje vlastnosť margin-top s praktickou implementáciou v CSS.

Čo je vlastnosť s „najvyššou maržou“?

' margin-top Vlastnosť ” sa používa na vytvorenie dodatočného priestoru medzi prvkami HTML. Dá sa nastaviť s kladnými aj zápornými hodnotami. Tieto hodnoty sú nastavené podľa potrieb návrhu a pomáhajú pri predchádzaní prekrývaniu a úprave medzier medzi prvkami HTML.





Ako používať vlastnosť „na vrchu“ s kladnou hodnotou?

Vlastnosť „margin-top“ s kladnou hodnotou pridáva ďalšie medzery od hornej pozície smerom k stredu vybratého prvku HTML. Poskytnutá hodnota môže byť v pixeloch, percentách, rem alebo v globálnych hodnotách ako auto, inherit, unset atď. Pre lepšie pochopenie si prejdime príklad:



Príklad: Využitie kladnej hodnoty



Predpokladajme súbor HTML, ktorý vytvára „

” a poskytuje fiktívne údaje. Ďalej priraďte „ pozitívne ” hodnotu do triedy prvku “div”:



< telo >
< div trieda = 'pozitívny' >
< p > Je priradený vrchol okraja s kladnou hodnotou p >
div >
telo >

Po vytvorení štruktúry HTML použite vlastnosti CSS na „ pozitívne ' trieda:



< štýl >
.pozitívne {
šírka: 300px;
výška: 200px;
farba pozadia: lesná zelená;
veľkosť písma: 20px;
farba: #fff;
margin-top: 50px;
}
štýl >

Vo vyššie uvedenom útržku kódu:

  • Najprv nastavte hodnoty „ 300 pixelov “ a „ 200 pixelov “ do CSS “ šírka “ a „ výška “ vlastnosti, resp.
  • Ďalej, „ farba pozadia “, “ veľkosť písma “ a „ farba Vlastnosti CSS sa využívajú na účely lepšej vizualizácie.
  • Nakoniec je hodnota „50px“ poskytnutá „ margin-top ” vlastnosť pridať ďalší priestor.

Po vykonaní vyššie uvedeného útržku kódu bude webová stránka vyzerať takto:

Vyššie uvedený gif ilustruje účinok nastavenia hodnoty vlastnosti margin-top na webovej stránke.

Ako používať vlastnosť „najvyššia marža“ so zápornou hodnotou?

' margin-top Vlastnosť ” so zápornou hodnotou nastavuje extra medzery od hornej pozície oproti stredu alebo smerom k vonkajšej strane stránky vzhľadom na vybraný prvok HTML. Väčšinou sa používa na vytváranie prekrývajúcich sa efektov alebo pri umiestňovaní HTML elementu.

Poďme si prejsť príkladom pre lepšie pochopenie.

Príklad: Využitie zápornej hodnoty

Predpokladajme súbor HTML, ktorý vytvára „

” a poskytuje fiktívne údaje. Ďalej priraďte „ negatívne ” hodnotu do triedy prvku “div”:

< štýl >
.negatívne {
farba: biela;
text-align: center;
farba pozadia: červená ;
margin-top: -30 pixelov ;
výplň: 30px;
výška: 100px;
}
štýl >
< telo >
< div trieda = 'negatívny' >
Priradí sa záporná hodnota pre Vlastnosť na okraji
div >
telo >

Popis vyššie uvedeného útržku kódu je opísaný nižšie:

  • Po prvé, „ negatívne “trieda je vybraná v rámci “