El ' marge-superior La propietat ajuda a molts desenvolupadors a crear dissenys responsius i a posicionar elements HTML. L'ús de la propietat 'margin-top' proporciona més control sobre els elements HTML, afegeix separació visual i ajuda a crear millors dissenys sensibles. Aquesta guia mostra la propietat margin-top amb una implementació pràctica en CSS.
- Què és la propietat 'margin-top'?
- Utilitzeu la propietat 'margin-top' amb un valor positiu
- Utilitzeu la propietat 'margin-top' amb un valor negatiu
Què és la propietat 'margin-top'?
El ' marge-superior La propietat s'utilitza per crear espai addicional entre els elements HTML. Es pot configurar amb valors positius i negatius. Aquests valors s'estableixen segons les necessitats del disseny i ajuden a evitar la superposició i ajustar l'espaiat entre els elements HTML.
Com utilitzar la propietat 'margin-top' amb un valor positiu?
La propietat 'margin-top' amb un valor positiu afegeix un espai addicional des de la posició superior cap al centre de l'element HTML seleccionat. El valor proporcionat pot estar en píxels, percentatge, rem o en valors globals com ara auto, inherit, unset, etc. Vegem un exemple per entendre millor:
Exemple: Utilització del valor positiu
Suposem un fitxer HTML que crea un ' Després de la creació de l'estructura HTML, apliqueu les propietats CSS al ' positiu ” classe: Al fragment de codi anterior: Després de l'execució del fragment de codi anterior, la pàgina web té aquest aspecte: El gif anterior il·lustra l'efecte de definir el valor de la propietat del marge superior a la pàgina web. El ' marge-superior ” amb un valor negatiu estableix un espai addicional des de la posició superior oposada al centre o cap a l'exterior de la pàgina en relació amb l'element HTML seleccionat. S'utilitza principalment per crear efectes superposats o en el posicionament de l'element HTML. Passem per un exemple per entendre millor. Exemple: Ús de valor negatiu Suposem un fitxer HTML que crea un ' La descripció del fragment de codi anteriorment es descriu a continuació: Després de l'execució del fragment de codi anterior, la pàgina web apareix així: El gif anterior mostra l'efecte que es produeix en el disseny de la pàgina web en establir el valor negatiu per a la propietat del marge superior. El ' marge-superior La propietat s'utilitza per crear espai addicional entre els elements HTML. Es pot configurar amb valors positius i negatius. Si la propietat 'margin-top' s'assigna amb un valor positiu, l'espai addicional s'afegeix al centre de la pàgina web o de l'element HTML seleccionat. En cas d'un valor 'negatiu' l'espai s'afegeix però cap a l'exterior de la pàgina. Aquest article demostra què és la propietat del marge superior en CSS.
< cos >
< div classe = 'positiu' >
< pàg > S'assigna un marge superior amb un valor positiu pàg >
div >
cos >
< estil >
.positiu {
amplada: 300 píxels;
alçada: 200px;
color de fons: verd bosc;
mida de la lletra: 20px;
color: #fff;
marge superior: 50 píxels;
}
estil >
Com utilitzar la propietat 'margin-top' amb un valor negatiu?
.negatiu {
color: blanc;
alineació de text: centre;
color de fons: vermell ;
marge superior: -30 píxels ;
farciment: 30px;
alçada: 100px;
}
estil >
< cos >
< div classe = 'negatiu' >
S'assigna el valor negatiu per Propietat de marge superior
div >
cos >
Conclusió