web-dev-qa-db-fra.com

CSS: Top vs Margin-top

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

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

csscss-position
82
Jason

top est pour Tweak un élément utilisant la propriété position.
margin-top sert à mesurer la distance externe à l'élément, par rapport au précédent.

De plus, le comportement de top peut différer selon le type de position, absolute, relative ou fixed.

70
Dave

Vous utiliseriez la marge si vous vouliez éloigner un élément (bloc) des autres éléments du flux de documents. Cela signifie qu'il repousserait/éloignerait les éléments suivants. N'oubliez pas que les marges verticales des éléments de bloc adjacents s'effondrent.

Si vous vouliez que l'élément n'ait aucun effet sur les éléments environnants, vous utiliseriez le positionnement (abs., Rel.) Et les top, bottom, left et right paramètres.

Avec le positionnement relative, l'élément occupera toujours son espace d'origine comme lorsqu'il était positionné statiquement. C'est pourquoi rien ne se passe si vous passez simplement de la position static à la position relative. De là, vous pouvez ensuite le pousser à travers les éléments environnants.

Avec le positionnement absolute, vous supprimez complètement l'élément du flux de documents (statique), ce qui libérera l'espace qu'il occupait. Vous pouvez ensuite le positionner librement - mais relatif au prochain meilleur élément positionné de manière non statique enroulé autour de lui. S'il n'y en a pas, il sera ancré à la page entière.

83
DanMan

La marge applique et étend/contracte la limite normale de l'élément, mais lorsque vous appelez top, vous ignorez la position régulière de l'élément et la faites flotter à 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 html à la hauteur de 50% de son conteneur (c'est-à-dire que le div affichant le mot "content" serait affiché à 50% de la hauteur de son nœud div ou html contenant directement avant div # some_element) mais si vous ouvrez votre inspecteur du navigateur (f12 sur Windows ou cmd + alt + i sur mac) et passez la souris sur l'élément, vous verrez ses limites surlignées et noterez que l'élément a été poussé vers le bas plutôt que repositionné.

Haut d'autre part:

#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 conteneur. En d'autres termes, il y aura un espace entre les bords de l'élément et son conteneur.

À votre santé!

8
DrewT

à partir d'octets:

"La marge est cet 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 des blocs contenant, comme cette même feuille de papier à l'intérieur une boîte en carton, mais elle n'est pas contre le bord du conteneur. "

Ma compréhension est 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 contenant au 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.

4
Orbit

La propriété top est une propriété position. Il est utilisé avec la propriété position, telle que absolute ou relative. margin-top est la propriété d'un élément.

4
lin

Je me demandais la même chose. J'ai créé un Codepen si quelqu'un voulait jouer avec.

CSS:

.container {
    margin-top: -70px;
}


.category {
    top: -12px;
    position: absolute;
}
0
Furkat Kholmatov