CSS: Top vs Margin-top

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

Quelqu'un peut-il expliquer pourquoi j'utiliserais l'un sur l'autre et en quoi ils diffèrent?

topest pour modifier un élément avec l'utilisation de la positionpropriété.
margin-topsert à mesurer la distance externe à l'élément, par rapport au précédent.

De plus, le topcomportement peut différer selon le type de position absolute, relativeou fixed.

Vous utiliseriez une marge si vous vouliez éloigner un élément (bloc) des autres éléments du flux de documents. Cela signifie que cela repousserait les éléments suivants plus loin / plus bas. Sachez que les marges verticales des éléments de bloc adjacents se réduisent.

Si vous vouliez l'élément d'avoir aucun effet sur les éléments environnants, vous souhaitez utiliser le positionnement (abs., Rel.) Et les top, bottom, leftet les rightparamètres.

Avec le relativepositionnement, l'élément occupera toujours son espace d'origine comme lorsqu'il était positionné de manière statique. Voilà pourquoi rien ne se passe, si vous venez de passer de staticla relativeposition de . À partir de là, vous pouvez ensuite le pousser à travers les éléments environnants.

Avec le absolutepositionnement, vous supprimez complètement l'élément du flux de documents (statique), de sorte qu'il libère l'espace qu'il occupait. Vous pouvez ensuite le positionner librement - mais par rapport au prochain meilleur élément non statiquement positionné enroulé autour de lui. S'il n'y en a pas, il sera ancré sur toute la page.

La marge 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 la faites flotter vers une position spécifique.

Exemple:

html:

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

css:

#some_element {margin-top: 50%}

Signifie que l'élément commencera à afficher du code HTML à la hauteur de 50% de son conteneur (c'est-à-dire que le div affichant le mot «contenu» sera affiché à 50% de la hauteur de son nœud div ou html contenant directement avant le div # some_element) mais si vous ouvrez votre l'inspecteur du navigateur (f12 sur Windows ou cmd + alt + i sur mac) et passez la souris sur l'élément, vous verrez ses limites en surbrillance et vous remarquerez que l'élément a été poussé vers le bas plutôt que repositionné.

Top par contre:

#some_element {top: 50%}

Repositionnera réellement l'élément, ce qui signifie qu'il s'affichera toujours à 50% de son conteneur, mais il repositionnera l'élément de sorte que son bord commence à 50% de son élément contenant. En d'autres termes, il y aura un espace entre les bords de l'élément et son conteneur.

À votre santé!

La toppropriété est une propriété de position. Il est utilisé avec la positionpropriété, comme absoluteou relative. margin-topest la propriété propre d'un élément.

à 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. 'Top' déplace le bord de la marge de l'élément de la boîte contenant les blocs, comme ce même morceau de papier à l'intérieur une boîte en carton, mais elle n'est pas contre le bord du conteneur. "

Je crois comprendre que margin-top crée une marge sur l'élément et top définit le bord supérieur de l'élément sous le bord supérieur de l'élément conteneur au niveau du décalage.

vous pouvez l'essayer ici:

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

remplacez simplement top par margin-top pour voir la différence.