CSS: Top vs Margin-top

Je ne suis pas sûr si j'ai bien compris la différence entre ces deux.

Quelqu'un peut m'expliquer pourquoi je voudrais utiliser l'un sur l'autre et comment ils diffèrent?

InformationsquelleAutor Jason | 2010-10-27
  1. 68

    top est pour ajuster un élément avec l'utilisation de position propriété.

    margin-top est externe pour la mesure de la distance de l'élément, par rapport à la précédente.

    Aussi, top comportement peut varier selon le type de poste, absolute, relative ou fixed.

    InformationsquelleAutor Dave
  2. 81

    Vous souhaitez utiliser la marge, si vous voulez déplacer un (bloc) de l'élément à l'écart des autres éléments dans le flux de documents. Cela signifie qu'il faudrait pousser les éléments suivants loin /plus bas. Être conscient que les parois verticales des éléments adjacents de l'effondrement.

    Si vous vouliez l'élément n'ont aucun effet sur les éléments environnants, vous pouvez utiliser le positionnement (abs., rel.) et le top, bottom, left et right paramètres.

    Avec relative positionnement, l'élément sera toujours occuper son espace d'origine que lorsqu'il est positionné de manière statique. C'est pourquoi rien ne se passe, si vous venez de passer de static à relative position. À partir de là, vous pouvez ensuite pousser à travers les éléments environnants.

    Avec absolute de positionnement, vous supprimer complètement l'élément de l' (statique) flux de documents, de sorte qu'il permettra de libérer de l'espace qu'il occupait. Vous pouvez ensuite positionner librement - mais relative pour le meilleur de la non-statique placé élément enroulé autour d'elle. Si il n'y est pas, il va être ancré à l'ensemble de la page.

    InformationsquelleAutor DanMan
  3. 8

    Marge s'applique et s'étend contrats de l'élément normal de la frontière, mais lorsque vous appelez haut, vous passez à côté de l'élément régulier de la position et flottant à une position spécifique.

    Exemple:

    html:

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

    css:

    #some_element {margin-top: 50%}

    Signifie que l'élément va commencer à afficher des html sur le 50% de la hauteur de son conteneur (c'est à dire la div en affichant le mot "contenu" sera affiché à 50% de la hauteur de sa div contenant ou nœud html directement avant le div#some_element), mais si vous ouvrez votre navigateur, l'inspecteur (f12 (Windows) ou cmd+alt+i sur mac) et de la souris sur l'élément que vous allez voir, c'est les limites de surbrillance et de l'avis de l'élément a été poussé vers le bas, plutôt que de re-positionné.

    Le dessus sur l'autre main:

    #some_element {top: 50%}

    Sera effectivement repositionner l'élément le sens qu'il affichera toujours à 50% de son contenant, mais il faudra repositionner l'élément de sorte que son bord commence à 50% de son contenant l'élément. En d'autres termes, il y a un écart entre les bords de l'élément et de son récipient.

    Cheers!

    InformationsquelleAutor DrewT
  4. 4

    de bytes:

    "La marge est l'espace entre le bord d'un élément de la boîte et le bord de la boîte complète, tels que la marge d'une lettre. 'top' déplace l'élément de la marge du bord de l'contenant des blocs de la boîte, comme le même morceau de papier à l'intérieur d'une boîte en carton, mais il n'est pas contre le bord du récipient."

    Ma compréhension est que margin-top crée une marge sur l'élément, et du haut définit le bord supérieur de l'élément en dessous du bord supérieur de l'élément de conteneur à l'offset.

    vous pouvez essayer ici:

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

    il suffit de remplacer le haut avec margin-top pour voir la différence.

    InformationsquelleAutor Orbit
  5. 4

    La top propriété est une propriété position. Il est utilisé avec le position biens, tels que des absolute ou relative. margin-top est un élément de la propriété.

    InformationsquelleAutor lin
  6. 0

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

    CSS:

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


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