[css] Propiedades y uso del margen
Los márgenes son fáciles de entender. Se refieren a la distancia fuera del borde. Pueden representar la distancia desde otros elementos y se establecen mediante el atributo de margen.
El margen puede ir seguido de múltiples valores, separados por espacios. El significado es el siguiente:
(1) Primero, colocamos tres cuadros con diferentes colores y un ancho y alto de. 100 píxeles.
(2) Agregamos un margen superior de 10 píxeles al cuadro naranja en el medio. Puede ver que el cuadro naranja se ha movido hacia abajo 10 píxeles y tiene un margen superior adicional.
(3) A continuación, eliminamos el margen superior y agregamos un margen inferior de 10 píxeles al cuadro naranja. Descubrimos que el cuadro naranja no se movió, pero el cuadro amarillo de abajo se movió, por lo que el uso del margen. -Debe distinguirse el margen superior y el inferior.
(4) Al margen se le puede asignar un valor. Agregamos un margen superior de -50px al cuadro naranja. Puede ver que el cuadro naranja se mueve hacia arriba.
(1) Colocamos un cuadro rojo grande con un pequeño cuadro naranja dentro. Cuando agregamos un margen superior de 50 píxeles al cuadro naranja, debería haber sido solo un cuadro pequeño. El margen superior adicional causa. que se mueva hacia abajo. Resulta que el efecto es como agregar un margen al cuadro grande. El cuadro grande se colapsa junto con el cuadro pequeño, que no es el efecto que queremos.
(2) Si el cuadro grande tiene un borde, o hay elementos en el cuadro naranja, la situación será normal y se podrá lograr el efecto que queremos sin colapsar:
(3) Solución
Cuando no hay un borde en el elemento exterior y no hay otros elementos que bloqueen la parte superior del elemento, establecer un margen superior para sus elementos secundarios provocará un colapso y no logrará lo que desea. quiero efecto. En la actualidad, solo podemos usar relleno cuando nos encontramos con esta situación y no usar margen. Por supuesto, hay muchas otras soluciones, por lo que no entraré en detalles.
Colocamos dos cuadros, agregamos un margen inferior de 100px al cuadro superior y agregamos un margen superior de 50px al cuadro inferior. El efecto final es como se muestra en la figura. 100px de diferencia:
Cuando el margen superior del elemento inferior se encuentra con el margen inferior del elemento superior, se producirá un efecto de superposición. Asegúrese de prestar atención al configurar.
Solo los elementos de bloque pueden establecer márgenes superior, inferior, izquierdo y derecho. La configuración de márgenes superior, inferior e inferior para elementos en línea no es válida.