style - margin-top css

¿Cómo funcionan los márgenes negativos en CSS y por qué es(margin-top:-5!=Margin-bottom: 5)?

Question

Un truco común para los elementos de posicionamiento vertical es utilizar el siguiente CSS:

.item {
position:absolute;
top:50%;
margin-top:-8px; /* half of height */
height: 16px;
}

Cuando se ve en la vista de métrica como en Chrome, esto es lo que ve:

Sin embargo, no se muestra un margen visual cuando pasas el cursor sobre el elemento, es decir, el margen está ''fuera'' del borde y se puede visualizar. Pero los márgenes negativos no aparecen. ¿Cómo se ven y qué es lo que lo hace diferente?

¿Por qué margin-top:-8px no es lo mismo que margin-bottom:8px ?

Entonces, ¿cómo funcionan los márgenes negativos y cuál es la intuición detrás de ellos? ¿Cómo ''aumentan'' (en el caso de margin-top < 0 ) un artículo?

Answer 1

Aquí ya se han señalado algunos puntos buenos, pero aunque hay mucha información sobre cómo el navegador realiza la representación de los márgenes, todavía no se ha respondido por qué :

"¿Por qué margin-top: -8px no es lo mismo que margin-bottom: 8px?"

lo que también podríamos preguntar es:

¿Por qué un margen inferior positivo no "sube" elementos anteriores, mientras que un margen superior positivo "choca" con los siguientes elementos?

entonces, lo que vemos es que hay una diferencia en la representación de los márgenes según el lado al que se aplican , los márgenes superiores (e izquierdos) son diferentes de los inferiores (y los derechos).

las cosas se vuelven más claras al tener una apariencia (simplificada) de cómo el navegador aplica los estilos: los elementos se representan de arriba hacia abajo en la ventana gráfica, comenzando en la esquina superior izquierda (por el momento, sigamos con la representación vertical, teniendo en cuenta que el horizontal es tratado de la misma manera).

considere el siguiente html:

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

de forma análoga a su posición en el código, estos tres cuadros aparecen apilados de arriba hacia abajo en el navegador ( manteniendo las cosas simples, no consideraremos aquí la propiedad order del módulo css3 ''flex-box'' ). por lo tanto, siempre que se apliquen estilos al recuadro 3, ya se han determinado las posiciones del elemento anterior (para el recuadro 1 y 2), y ya no se deben modificar por el bien de la velocidad de representación.

ahora, imagina un margen superior de -10px para el recuadro 3. en lugar de desplazar todos los elementos precedentes para juntar espacio, el navegador simplemente empujará el recuadro 3 hacia arriba, por lo que se representará encima (o debajo, dependiendo del índice z ) cualquier elemento anterior. incluso si el rendimiento no fuera un problema, mover todos los elementos podría significar sacarlos de la ventana gráfica, por lo que la posición de desplazamiento actual tendría que modificarse para que todo vuelva a estar visible.

lo mismo se aplica a un margen inferior para el recuadro 3, tanto negativo como positivo: en lugar de influir en los elementos ya evaluados, solo se determina un nuevo "punto de partida" para los próximos elementos. por lo tanto, establecer un margen inferior positivo empujará hacia abajo los siguientes elementos; uno negativo los empujará hacia arriba.

Answer 2

Como ha utilizado el posicionamiento absoluto y ha especificado un porcentaje superior, solo el margen superior afectará la ubicación de su objeto .item. Si, en cambio, lo colocaste usando bottom: 50%, entonces necesitarías margin-bottom -8px para centrarlo, y margin-top no tendría ningún efecto.

El margen afecta los límites de un elemento en términos de posicionamiento, ya sea absolutamente como en su caso, o en relación con los elementos vecinos. Imagine que el margen es el fundamento de su elemento sobre el que se asienta. Por lo general, tienen el mismo tamaño, pero se pueden agrandar o reducir en uno o en los cuatro bordes.

Su CSS le dice al navegador que ubique la parte superior de su elemento en el margen en un punto al 50% hacia abajo de la página. Sin embargo, como todos los elementos no tienen un solo píxel, el navegador necesita saber qué parte del mismo se alineará en la mitad inferior de la página. Para alinear la parte superior del elemento, usa el margen superior. Por defecto, esto está en línea con la parte superior del elemento, pero puede modificarlo con CSS.

En su caso, el 50% superior daría como resultado que la parte superior del elemento comience en el medio de la página. Al aplicar un margen superior negativo, el navegador utiliza el punto 8px en el elemento desde la parte superior (es decir, la línea en el medio) como el lugar para colocar al 50%.

Si aplica un margen positivo en la parte inferior, esto amplía la línea que usa el navegador para ubicar el fondo fuera del elemento en sí, lo que genera un espacio entre él y cualquier elemento adyacente, o afecta dónde se coloca absolutamente si se posiciona en función de El fondo.

Answer 3

Los márgenes negativos son válidos en CSS y la comprensión de su comportamiento (conforme) se basa principalmente en el modelo de caja y el colapso de margen. Si bien ciertos escenarios son más complejos, se pueden evitar muchos errores comunes después de estudiar la especificación.

Por ejemplo, el renderizado de su código de muestra está guiado por la especificación css como se describe en el cálculo de alturas y márgenes para elementos no reemplazados absolutamente posicionados .

Si tuviera que hacer una representación gráfica, probablemente iría con algo como esto (no a escala):

El cuadro de margen perdió 8px en la parte superior, sin embargo, esto no afecta el contenido y las cajas de relleno . Debido a que su elemento está completamente posicionado, mover el elemento 8px hacia arriba no causa ninguna otra perturbación en el diseño; con contenido de flujo estático que no siempre es el caso.

Prima:

¿Aún necesita convencerse de que las especificaciones de lectura son el camino a seguir (a diferencia de artículos como este )? Veo que está tratando de centrar verticalmente el elemento, entonces ¿por qué tiene que establecer margin-top:-8px; y no margin-top:-50%; ?

Bueno, el centrado vertical en CSS es más difícil de lo que debería ser . Al configurar incluso los márgenes superior e inferior en%, el valor se calcula como un porcentaje siempre relativo al ancho del bloque contenedor . Este es un error bastante común y la peculiaridad rara vez se describe fuera de w3 docos

Answer 4

Margen es el espaciado fuera de su elemento, al igual que el relleno es el espaciado dentro de su elemento.

Establecer el margen inferior indica qué distancia quiere debajo del bloque actual. Establecer un margen superior negativo indica que desea un espaciado negativo por encima de su bloque. El espaciado negativo puede ser, en sí mismo, un concepto confuso, pero del mismo modo que el margen superior positivo empuja hacia abajo el contenido, un margen superior negativo aumenta el contenido.

Answer 5

Me pregunto si esta pregunta ha sido bien respondida: cómo funcionan los márgenes CSS y por qué es ese margen superior: -5; no es lo mismo que margin-bottom: 5 ;?

El margen es la distancia del entorno del elemento. margin-top dice "... distancia de los alrededores cuando medimos desde el ''lado'' superior de la ''caja'' del elemento y el margen inferior es la distancia desde el ''lado'' inferior de la ''caja''". Luego margin-top: 5; se refiere al perímetro "lateral" superior, -5 en ese caso; cualquier cosa que se aproxime desde el ''lado'' superior puede solaparse con el ''lado'' superior del elemento en 5, y en el margen inferior: 5; significa que la distancia entre el ''lado'' inferior del elemento y el entorno es 5.

Básicamente, pero afectado por elementos float y similares: http://www.w3.org/TR/CSS2/box.html#margin-properties .

http://coding.smashingmagazine.com/2009/07/27/the-definitive-guide-to-using-negative-margins/

Estoy a punto de ser corregido.

Answer 6

Trataré de explicarlo visualmente:

/**
* explaining margins
*/
body {
padding: 3em 15%
}
.parent {
width: 50%;
width: 400px;
height: 400px;
position: relative;
background: lemonchiffon;
}
.parent:before,
.parent:after {
position: absolute;
content: "";
}
.parent:before {
top: 0;
bottom: 0;
left: 50%;
border-left: dashed 1px #ccc;
}
.parent:after {
left: 0;
right: 0;
top: 50%;
border-top: dashed 1px #ccc;
}
.child {
width: 200px;
height: 200px;
background: rgba(200, 198, 133, .5);
}
ul {
padding: 5% 20px;
}
.set1 .child {
margin: 0;
position: relative;
}
.set2 .child {
margin-left: 75px;
position: relative;
}
.set3 .child {
margin-left: -75px;
position: relative;
}
/* position absolute */
.set4 .child {
top: 50%;
left: 50%;
margin: 0;
position: absolute;
}
.set5 .child {
top: 50%;
left: 50%;
margin-left: 75px;
position: absolute;
}
.set6 .child {
top: 50%; /* level from which margin-top starts
- downwards, in the case of a positive margin
- upwards, in the case of a negative margin
*/
left: 50%; /* level from which margin-left starts
- towards right, in the case of a positive margin
- towards left, in the case of a negative margin
*/
margin: -75px;
position: absolute;
}

<!-- content to be placed inside <body>…</body> -->
<h2><code>position: relative;</code></h2>
<h3>Set 1</h3>
<div class="parent set 1">
<div class="child">
<pre>
.set1 .child {
margin: 0;
position: relative;
}
</pre>
</div>
</div>
<h3>Set 2</h3>
<div class="parent set2">
<div class="child">
<pre>
.set2 .child {
margin-left: 75px;
position: relative;
}
</pre>
</div>
</div>
<h3>Set 3</h3>
<div class="parent set3">
<div class="child">
<pre>
.set3 .child {
margin-left: -75px;
position: relative;
}
</pre>
</div>
</div>
<h2><code>position: absolute;</code></h2>
<h3>Set 4</h3>
<div class="parent set4">
<div class="child">
<pre>
.set4 .child {
top: 50%;
left: 50%;
margin: 0;
position: absolute;
}
</pre>
</div>
</div>
<h3>Set 5</h3>
<div class="parent set5">
<div class="child">
<pre>
.set5 .child {
top: 50%;
left: 50%;
margin-left: 75px;
position: absolute;
}
</pre>
</div>
</div>
<h3>Set 6</h3>
<div class="parent set6">
<div class="child">
<pre>
.set6 .child {
top: 50%;
left: 50%;
margin: -75px;
position: absolute;
}
</pre>
</div>
</div>

Answer 7

Un margen superior de -8px significa que será 8px más alto que si tuviera un margen de 0.

Un margen inferior de 8px significa que la cosa debajo será 8px más abajo que si tuviera un margen de 0.