Hacemos una verificación exhaustiva cada uno de los artículos en nuestro espacio con el objetivo de enseñarte en todo momento la información más veraz y certera.
Solución:
Los márgenes negativos son válidos en css y la comprensión de su comportamiento (compatible) se basa principalmente en el modelo de caja y el colapso de márgenes. Si bien ciertos escenarios son más complejos, se pueden evitar muchos errores comunes después de estudiar la especificación.
Por ejemplo, la representación de su código de muestra se guía por la especificación css como se describe en el cálculo de alturas y márgenes para elementos no reemplazados posicionados absolutamente.
Si tuviera que hacer una representación gráfica, probablemente elegiría algo como esto (no a escala):
Él cuadro de margen perdió 8px en la parte superior, sin embargo, esto no afecta a la cajas de contenido y relleno. Debido a que su elemento está absolutamente posicionado, mover el elemento 8px hacia arriba no causa más perturbaciones en el diseño; con static contenido de flujo que no siempre es el caso.
Prima:
Todavía necesito convencerme de que leer las especificaciones es la 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 cima o abajo márgenes en %, el valor se calcula como un porcentaje siempre relativo a la ancho del bloque contenedor. Esta es una trampa bastante común y la peculiaridad rara vez se describe fuera de w3 docos
Intentaré 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;
position: relative;Set 1
.set1 .child margin: 0; position: relative;conjunto 2
.set2 .child margin-left: 75px; position: relative;conjunto 3
.set3 .child margin-left: -75px; position: relative;
position: absolute;conjunto 4
.set4 .child top: 50%; left: 50%; margin: 0; position: absolute;conjunto 5
.set5 .child top: 50%; left: 50%; margin-left: 75px; position: absolute;conjunto 6
.set6 .child top: 50%; left: 50%; margin: -75px; position: absolute;El margen es el espacio fuera de su elemento, al igual que el relleno es el espacio dentro de su elemento.
Establecer el margen inferior indica qué distancia desea debajo del bloque actual. Establecer un margen superior negativo indica que desea un espacio negativo sobre su bloque. El espaciado negativo en sí mismo puede ser un concepto confuso, pero de la misma manera que el margen superior positivo empuja el contenido hacia abajo, un margen superior negativo empuja el contenido hacia arriba.
Más adelante puedes encontrar las notas de otros desarrolladores, tú incluso puedes insertar el tuyo si lo crees conveniente.
¡Haz clic para puntuar esta entrada!(Votos: 0 Promedio: 0)Utiliza Nuestro Buscador