El espacio de margen de CSS se separa de manera diferente para la parte superior y los lados
https://stackoverflow.com/questions/4220636
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Espero que alguien pueda ayudarme, ya que me siento bastante tonto por hacer tal pregunta aquí. No soy un diseñador web, pero he estado atrapado con la tarea de crear un diseño básico. El diseño se utilizará en un dispositivo integrado con un navegador estándar, por lo que algunas de las etiquetas CSS específicas del navegador. IE: -Moz-Border-Radius no necesitará trabajar con IE y tal.
Tengo una página de 1024x768 en la que quiero tener algunas secciones de bloque. Estas secciones tendrán 4 px de espacio en cada lado. Por lo tanto, una cuadrícula de 2x2 debe tener un espacio de 4 px (negro) en el exterior de todo el sitio, mientras que el interior tiene un espacio de 8px entre las cajas (4px en el lado derecho de una caja y 4px en la izquierda, o 4px en la parte inferior de uno y 4px en la parte superior, et)
Cuando configuré cada uno de estos CSS de Div: 4px; Obtengo la brecha exterior de 4px. También obtengo un espacio horizontal de 8px entre los lados izquierdo y derecho de las cajas. El problema es que el espaciado vertical es de 4 px, como uno de los cuartos de cajas no aplica un margen superior o inferior. No creo que esto sea algo que se supone que debe suceder, así que creo que cometí un error en alguna parte.
Gracias de antemano: este lugar es increíble.
Solución
Eso se debe al 'colapso del margen': el margen vertical adyacente más pequeño se ignora en el caso más simple.
Otros consejos
Intente usar relleno en lugar de margen.
El margen más grande entre dos objetos se usa como espacio entre ellos.
Si object_a tiene un margen de 4 y object_b Tiene un margen de 6, si los coloca uno al lado del otro, tendrán un margen de 6.
Si usa el relleno, crea más una burbuja a su alrededor y combina la distancia.
Si object_a tiene un relleno de 4 y object_b Tiene un relleno de 6, si los coloca uno al lado del otro, tendrán un acolchado de 10.
Actualización - Gracias a @Bobby Jack
Los márgenes horizontales nunca colapsan. Solo vertical.
