margenes espacio entre ejemplos div css margin responsive-design fluid-layout

espacio - margin css



DiseƱo fluido de CSS: el margen superior basado en porcentaje crece cuando el ancho del contenedor aumenta (2)

En CSS, los cuatro márgenes: y relleno: los porcentajes son relativos al ancho ... aunque eso pueda parecer absurdo. Así es como son las especificaciones de CSS, no hay nada que puedas hacer al respecto.

¿Puedes hacer lo que quieras con ''ex'' (o ''em'') en su lugar? Esa es la manera en que estoy acostumbrado a ver los valores "fluidos" para margen / relleno especificados ... y puede ser menos problemático que los porcentajes. (Aunque no tengo la experiencia de primera mano pertinente, sospecho que las precisiones extremadamente largas sobre los valores de porcentaje calculados te ayudarán a solucionar los problemas de incompatibilidad del navegador más adelante. Mi estilo es limitar los porcentajes de CSS a enteros si es posible , u ocasionalmente tal vez uno o, a veces, incluso dos dígitos después del punto decimal.)

Si realmente quieres un espacio vertical vacío de tamaño arbitrario exacto que sea un porcentaje del contenedor, lo primero que me viene a la mente es una especificación separada de CSS <div> con un "height: nn%". O tal vez alguna otra cosa que especifique ya está manejando los tamaños verticales de la manera que desee (dado que parecería que los márgenes realmente no están haciendo nada en un cambio de tamaño vertical).

Solo estoy aprendiendo diseños fluidos de CSS y diseño receptivo, y estoy tratando de usar todos los valores de porcentaje sin valores de px en un diseño.

Hasta ahora parece estar funcionando, pero en un punto, estoy viendo algo que no esperaba. Estoy tratando de poner un margen entre dos divs apilados verticalmente que cambian en función de la altura del contenedor. Esperaría que ese margen cambie cuando cambie el tamaño de la ventana verticalmente, pero también crece si cambia el tamaño horizontalmente, lo que no quiero. ¿Qué me estoy perdiendo?

Aquí hay un violín. Gracias por su ayuda con anticipación.

http://jsfiddle.net/gregir/aP5kz/