' margin-top Tato vlastnost pomáhá mnoha vývojářům při vytváření responzivních rozvržení a umístění prvků HTML. Použití vlastnosti „margin-top“ poskytuje větší kontrolu nad prvky HTML, přidává vizuální oddělení a pomáhá vytvářet lépe responzivní návrhy. Tato příručka ukazuje vlastnost margin-top s praktickou implementací v CSS.
- Co je to vlastnost s nejvyšší marží?
- Použijte vlastnost „margin-top“ s kladnou hodnotou
- Použijte vlastnost „margin-top“ se zápornou hodnotou
Co je to vlastnost s nejvyšší marží?
' margin-top Vlastnost ” se používá k vytvoření dalšího prostoru mezi prvky HTML. Lze nastavit kladné i záporné hodnoty. Tyto hodnoty jsou nastaveny podle potřeb návrhu a pomáhají při zamezení překrývání a úpravě mezer mezi prvky HTML.
Jak používat vlastnost „margin-top“ s kladnou hodnotou?
Vlastnost „margin-top“ s kladnou hodnotou přidává další mezery od horní pozice směrem ke středu vybraného prvku HTML. Zadaná hodnota může být v pixelech, procentech, rem nebo v globálních hodnotách jako auto, inherit, unset atd. Pro lepší pochopení si projdeme příklad:
Příklad: Využití kladné hodnoty
Předpokládejme soubor HTML, který vytvoří „ Po vytvoření struktury HTML použijte vlastnosti CSS na „ pozitivní “třída: Ve výše uvedeném úryvku kódu: Po provedení výše uvedeného fragmentu kódu vypadá webová stránka takto: Výše uvedený gif ilustruje účinek nastavení hodnoty vlastnosti margin-top na webové stránce. ' margin-top ” vlastnost se zápornou hodnotou nastavuje zvláštní mezery od horní pozice proti středu nebo směrem k vnější straně stránky vzhledem k vybranému prvku HTML. Většinou se používá pro vytváření překrývajících se efektů nebo při umisťování HTML elementu. Pojďme si projít příklad pro lepší pochopení. Příklad: Využití záporné hodnoty Předpokládejme soubor HTML, který vytvoří „ Popis výše uvedeného fragmentu kódu je popsán níže: Po provedení výše uvedeného fragmentu kódu vypadá webová stránka takto: Výše uvedený gif zobrazuje vliv na design webové stránky nastavením záporné hodnoty pro vlastnost margin-top. ' margin-top Vlastnost ” se používá k vytvoření dalšího prostoru mezi prvky HTML. Lze nastavit kladné i záporné hodnoty. Pokud je vlastnosti „margin-top“ přiřazena kladná hodnota, přidá se prostor navíc směrem ke středu webové stránky nebo vybraného prvku HTML. V případě „záporné“ hodnoty je mezera přidána, ale směrem k vnější straně stránky. Tento článek ukazuje, co je vlastnost margin-top v CSS.
< tělo >
< div třída = 'pozitivní' >
< p > Horní okraj s kladnou hodnotou je přiřazen p >
div >
tělo >
< styl >
.pozitivní {
šířka: 300px;
výška: 200px;
barva pozadí: lesní zelená;
velikost písma: 20px;
barva: #fff;
margin-top: 50px;
}
styl >
Jak používat vlastnost „margin-top“ se zápornou hodnotou?
.negativní {
barva bílá;
text-align: center;
barva pozadí: Červené ;
margin-top: -30 pixelů ;
odsazení: 30px;
výška: 100px;
}
styl >
< tělo >
< div třída = 'negativní' >
Je přiřazena záporná hodnota pro Vlastnost na okraji
div >
tělo >
Závěr