CSS : Top vs Margin-top

Question

Je ne suis pas sûr de bien comprendre la différence entre les deux.

Quelqu'un peut-il m'expliquer pourquoi j'utiliserais l'un plutôt que l'autre et en quoi ils diffèrent ?

Answer 1

Vous utiliseriez la marge si vous vouliez éloigner un élément (bloc) d'autres éléments dans le flux du document. Cela signifie qu'il repoussera les éléments suivants vers le bas. Sachez que les marges verticales des éléments de bloc adjacents se réduisent.

Si vous vouliez que l'élément n'ait pas d'effet sur les éléments environnants, vous utiliseriez le positionnement (abs., rel.) et la balise top , bottom , left y right paramètres.

Avec relative l'élément occupera toujours son espace d'origine comme lorsqu'il est positionné de manière statique. C'est pourquoi rien ne se passe, si vous passez simplement de static a relative position. À partir de là, vous pouvez ensuite le pousser sur les éléments environnants.

Avec absolute vous supprimez complètement l'élément du flux (statique) du document, ce qui libère l'espace qu'il occupait. Vous pouvez alors le positionner librement, mais relatif à l'élément suivant le mieux positionné non statiquement qui l'entoure. S'il n'y en a pas, il sera ancré à l'ensemble de la page.

Answer 2

top permet de modifier un élément à l'aide de la fonction position propriété.
margin-top permet de mesurer la distance extérieure à l'élément, par rapport à la précédente.

Aussi, top Le comportement peut varier en fonction du type de poste, absolute , relative o fixed .

Answer 3

La marge s'applique et étend/contracte la limite normale de l'élément, mais lorsque vous appelez top, vous ignorez la position normale de l'élément et vous le faites flotter à une position spécifique.

Exemple :

html :

<div id="some_element">content</div>

css :

#some_element {margin-top: 50%}

Cela signifie que l'élément commencera à afficher le code html à la hauteur de 50 % de son conteneur (par exemple, la division affichant le mot "contenu" s'affichera à la hauteur de 50 % de la division ou du nœud html qui la contient, juste avant div#some_element), mais si vous ouvrez l'inspecteur de votre navigateur (f12 sous Windows ou cmd+alt+i sous Mac) et que vous passez la souris sur l'élément, vous verrez ses limites mises en évidence et vous remarquerez que l'élément a été poussé vers le bas plutôt que repositionné.

Top, d'autre part :

#some_element {top: 50%}

repositionnera réellement l'élément, c'est-à-dire qu'il s'affichera toujours à 50 % de son conteneur, mais il repositionnera l'élément de sorte que son bord commence à 50 % de l'élément qui le contient. En d'autres termes, il y aura un espace entre les bords de l'élément et son conteneur.

A la vôtre !

Answer 4

Le site top est une propriété de position. Elle est utilisée avec l'option position comme absolute o relative . margin-top est la propriété propre d'un élément.

Answer 5

À partir d'octets :

"La marge est l'espace entre le bord de la boîte d'un élément et le bord de la boîte complète, comme la marge d'une lettre. Le terme "top" déplace le bord de la marge de l'élément par rapport à la boîte du bloc qui le contient, comme la même feuille de papier à l'intérieur d'une boîte en carton, mais il n'est pas contre le bord du conteneur."

Si j'ai bien compris, margin-top crée une marge sur l'élément, et top place le bord supérieur de l'élément sous le bord supérieur de l'élément contenant le décalage.

vous pouvez l'essayer ici :

http://w3schools.com/css/tryit.asp?filename=trycss_position_top

Il suffit de remplacer top par margin-top pour voir la différence.