De ' marge-top ” property helpt veel ontwikkelaars bij het maken van responsieve lay-outs en het positioneren van HTML-elementen. Het gebruik van de eigenschap 'margin-top' biedt meer controle over HTML-elementen, voegt visuele scheiding toe en helpt bij het maken van beter reagerende ontwerpen. Deze gids demonstreert de eigenschap margin-top met praktische implementatie in CSS.
- Wat is de 'marge-top' eigenschap?
- Gebruik de eigenschap 'margin-top' met een positieve waarde
- Gebruik de eigenschap 'margin-top' met een negatieve waarde
Wat is de 'marge-top' eigenschap?
De ' marge-top ” eigenschap wordt gebruikt voor het creëren van extra ruimte tussen HTML-elementen. Het kan worden ingesteld met zowel positieve als negatieve waarden. Deze waarden worden ingesteld op basis van de behoeften van het ontwerp en helpen bij het voorkomen van overlapping en het aanpassen van de afstand tussen de HTML-elementen.
Hoe 'marge-top' -eigenschap met een positieve waarde te gebruiken?
De eigenschap 'margin-top' met een positieve waarde voegt extra ruimte toe vanaf de bovenste positie naar het midden van het geselecteerde HTML-element. De verstrekte waarde kan zijn in pixels, percentage, rem of in globale waarden zoals auto, overnemen, niet instellen, enz. Laten we een voorbeeld doornemen voor een beter begrip:
Voorbeeld: gebruik van positieve waarde
Laten we uitgaan van een HTML-bestand dat een ' Pas na het maken van de HTML-structuur CSS-eigenschappen toe op de positief ' klas: In het bovenstaande codefragment: Na de uitvoering van het bovenstaande codefragment ziet de webpagina er als volgt uit: De bovenstaande gif illustreert het effect van het instellen van de waarde van de eigenschap margin-top op de webpagina. De ' marge-top ”-eigenschap met een negatieve waarde stelt extra afstand in vanaf de bovenste positie tegenover het midden of naar de buitenkant van de pagina ten opzichte van het geselecteerde HTML-element. Het wordt meestal gebruikt om overlappende effecten te creëren of om het HTML-element te positioneren. Laten we een voorbeeld doornemen voor een beter begrip. Voorbeeld: gebruik van negatieve waarde Laten we uitgaan van een HTML-bestand dat een ' De beschrijving van het bovengenoemde codefragment wordt hieronder beschreven: Na de uitvoering van het bovenstaande codefragment ziet de webpagina er als volgt uit: De bovenstaande gif geeft het effect weer dat optreedt op het ontwerp van de webpagina door de negatieve waarde in te stellen voor de eigenschap margin-top. De ' marge-top ” eigenschap wordt gebruikt voor het creëren van extra ruimte tussen HTML-elementen. Het kan worden ingesteld met zowel positieve als negatieve waarden. Als aan de eigenschap 'margin-top' een positieve waarde wordt toegewezen, wordt de extra ruimte toegevoegd in de richting van het midden van de webpagina of het geselecteerde HTML-element. Bij een “negatieve” waarde wordt de ruimte toegevoegd maar naar de buitenkant van de pagina toe. Dit artikel laat zien wat margin-top-eigenschap is in CSS.
< lichaam >
< div klas = 'positief' >
< P > Margetop met een positieve waarde wordt toegewezen P >
div >
lichaam >
< stijl >
.positief {
breedte: 300px;
hoogte: 200px;
achtergrondkleur: bosgroen;
lettergrootte: 20px;
kleur: #fff;
marge-top: 50px;
}
stijl >
Hoe gebruik je de 'margin-top' eigenschap met een negatieve waarde?
.negatief {
kleur wit;
tekst uitlijnen: centreren;
Achtergrond kleur: rood ;
marge-top: -30px ;
opvulling: 30px;
hoogte: 100px;
}
stijl >
< lichaam >
< div klas = 'negatief' >
De negatieve waarde wordt toegewezen voor Marge-top eigendom
div >
lichaam >
Conclusie