CSS: Superior vs Margen superior

Question

No estoy seguro de si entiendo completamente la diferencia entre estos dos.

¿Alguien puede explicar por qué usaría uno sobre el otro y cómo difieren?

Answer 1

top es para ajustar un elemento con el uso de la propiedad position.
margin-top es para medir la distancia externa al elemento, en relación con el anterior.

Además, el comportamiento de top puede variar según el tipo de posición, absolute, relative o fixed.

Answer 2

de bytes:

"Margen es que el espacio entre el borde de la caja de un elemento y el borde de la caja completa, tales como el margen de una carta 'top' desplaza borde del margen del elemento de la contiene. caja de bloques, como el mismo pedazo de papel dentro de una caja de cartón, pero no está contra el borde del contenedor ".

Mi comprensión es que margin-top crea un margen en el elemento y top establece el borde superior del elemento debajo del borde superior del elemento contenedor en el desplazamiento.

se puede probar aquí:

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

basta con sustituir la parte superior con margin-top para ver la diferencia.

Answer 3

Utilizaría margen, si desea mover un elemento (bloque) de otros elementos en el flujo de documentos. Eso significa que empujaría los siguientes elementos lejos/más abajo. Tenga en cuenta que los márgenes verticales de los elementos adyacentes se colapsan.

Si quería que el elemento a tener ningún efecto sobre los elementos que lo rodean, que tendría que utilizar posicionamiento (abs., Rel.) Y los ajustes top, bottom, left y right.

Con el posicionamiento relative, el elemento seguirá ocupando su espacio original como cuando está posicionado estáticamente. Es por eso que no pasa nada, si cambia de static a relative posición. A partir de ahí, puede empujarlo a través de los elementos circundantes.

Con el posicionamiento absolute, elimina completamente el elemento del flujo de documentos (estático), por lo que liberará el espacio que ocupaba. A continuación, puede colocarlo libremente, pero relativo al siguiente mejor elemento colocado no estáticamente alrededor de él. Si no hay ninguno, estará anclado a toda la página.

Answer 4

El margen aplica y extiende/contrae el límite normal del elemento, pero cuando llama a la parte superior está ignorando la posición normal del elemento y lo está flotando a una posición específica.

Ejemplo:

html:

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

css:

#some_element {margin-top: 50%} 

significa que el elemento comenzará a mostrar html a la altura del 50% de su contenedor (es decir, el div que muestra la palabra "content" se mostraría al 50% de altura de su nodo div o html que se encuentra directamente antes de div # some_element) pero si abre el inspector de su navegador (f12 en Windows o cmd + alt + i en mac) y Pase el mouse sobre el elemento y verá que se resaltan los límites y observe que el elemento ha sido empujado hacia abajo en lugar de reubicado.

superior por el contrario:

#some_element {top: 50%} 

realmente va a cambiar la posición del elemento que significa que seguirá mostrando en el 50% de su contenedor pero va a cambiar la posición del elemento para que su borde se inicia en 50% de su elemento contenedor . En otras palabras, habrá un espacio entre los bordes del elemento y su contenedor.

¡Salud!

Answer 5

La propiedad top es una propiedad de posición. Se utiliza con la propiedad position, como absolute o relative. margin-top es propiedad de un elemento.