Lo que no sabes sobre el cálculo de márgenes porcentuales en CSS
La mayoría de los diseñadores web creen que saben CSS bastante bien. Después de todo, no hay mucho que hacer: unos pocos tipos de selector, unas pocas docenas de propiedades y algunas reglas en cascada que apenas necesita recordar, ya que se reducen al sentido común. Pero cuando llegas al nivel mínimo, hay muchos detalles oscuros que pocos diseñadores realmente entienden..
Cuando examiné los resultados de una prueba gratuita de CSS que ofrecí en línea durante los últimos seis meses, descubrí una pregunta que casi Ninguno tiene razón. De las miles de personas que tomaron la prueba., menos del 14% lo hizo bien.
La pregunta se reduce a esto: ¿Cómo se calculan los márgenes porcentuales??
La pregunta
Digamos que su sitio tiene un contenedor div, y dentro de eso, un contenido. div:
Ahora, vamos a dar ese contenido div un margen superior:
.contenido margen superior: 10%;
Bien, entonces es 10% ... pero 10% de qué? Esa es la pregunta que Solo el 13.8% de las personas puede contestar correctamente.. Y ten en cuenta que estas personas tienen acceso a Google.!
Lo que me encanta de esta pregunta es que Parece que la respuesta debería ser obvia.. Tanto es así, que sospecho que la mayoría de la gente simplemente adivina (y adivina mal). Pero tal vez sea no hace te parece obvio Quiero decir, si realmente usas tu imaginación, hay muchas maneras en que el navegador podría calcular un margen como este..
Entonces, ¿qué tal si lo reduzco para usted ya que la pregunta en la prueba es en realidad de opción múltiple? Aquí están tus opciones:
- 10% de la altura del contenido div.
- 10% de la altura del contenedor div.
- 10% del ancho del contenido div.
- 10% del ancho del contenedor div.
Recuerde, solo el 13.8% de las personas puede elegir la respuesta correcta de esta lista. Eso es mucho peor que la casualidad.!
Mira de cerca las respuestas; Verás que en realidad solo hay dos cosas que debes saber:
Contenedor o Contenido?
Primero es el tamaño del margen basado en el tamaño del div de contenido, o en el tamaño del div contenedor?
Ahora bien, esto no es un gimme, pero probablemente puedas confiar en tus instintos. Si configuro un div para que sea el 50% del ancho de su contenedor, y luego quiero que sus márgenes izquierdo y derecho llenen el resto del espacio, naturalmente los estableceré en un 25% cada uno (por lo que los porcentajes se suman a 100%). Para que funcione, los márgenes porcentuales deben basarse en las dimensiones del contenedor..
Efectivamente, dos tercios de las personas que toman la prueba obtienen esta parte de la respuesta correcta.
Ancho o alto?
Segundo, es el tamaño del margen superior basado en el ancho o la altura de ese elemento?
Si has estado prestando atención, probablemente ya estés en guardia. Para que pocas personas elijan la respuesta correcta, esta tiene que ser una pregunta con trampa, ¿verdad??
Y sin embargo, apuesto a que apenas puedes creer eso. la respuesta no es altura. Bueno no lo es.
Sí, estamos hablando de un margen superior aquí. Sí, el tamaño de ese margen es una medida vertical. Sí, si un bloque es el 50% de la altura de su contenedor, y le dio un margen superior del 25%, esperaría que fuera el 25% de la altura del contenedor.. Y te equivocarías.
No te sientas mal si pensabas que tenía que ser la altura. Casi el 80% de las personas que toman el examen están de acuerdo con usted:
Tiene sentido ... No, realmente!
¿Todavía no lo crees? Aquí hay una cita de la especificación de CSS del W3C:
El porcentaje se calcula con respecto al ancho del bloque que contiene la caja generada. Tenga en cuenta que esto también se aplica a los márgenes superiores e inferiores..
Lo mismo ocurre con el relleno superior e inferior, en caso de que te lo preguntes. En cuanto a las fronteras, es ilegal especificar su ancho como porcentaje.
Así que en este punto, probablemente estés pensando que los creadores de CSS son: loco, o simplemente cometieron un error muy tonto. Pero estoy aquí para decirles que hay dos buenas razones para basar los márgenes verticales en el ancho del bloque contenedor:
Consistencia horizontal y vertical
Existe, por supuesto, una propiedad abreviada que le permite especificar el margen para los cuatro lados de un bloque:
margen: 10%;
Esto se expande a:
margen superior: 10%; margen derecho: 10%; margen inferior: 10%; margen izquierdo: 10%;
Ahora, si escribió alguno de los anteriores, probablemente esperaría que los márgenes en los cuatro lados del bloque fueran de igual tamaño, ¿no es así? Pero si el margen izquierdo y el margen derecho se basaran en el ancho del contenedor, y el margen superior y el margen inferior se basaran en su altura, entonces generalmente serían diferentes!
Evitar la dependencia circular
CSS distribuye el contenido en bloques apilados verticalmente a lo largo de la página, por lo que el ancho de un bloque generalmente viene determinado por el ancho de su padre. En otras palabras, puedes calcular el ancho de un bloque sin preocuparse por lo que es dentro ese bloque.
La altura de un bloque es una cuestión diferente. Por lo general, la altura Depende de la altura combinada de su contenido.. Cambia la altura del contenido y tú cambias la altura del bloque. Ver el problema?
Para obtener la altura del contenido, debe conocer los márgenes superior e inferior que se le aplican. Y si esos márgenes dependen de la altura del bloque principal, estás en problemas, porque no puedes calcular uno sin conocer el otro.!
Basando márgenes verticales en el anchura del contenedor rompe esa dependencia circular, y hace posible diseñar la página.
As la clase
Así que ahí lo tienen: la pregunta más difícil en la prueba, y ahora puede responderla. ¿Quieres saber cómo te iría en el resto de la prueba? Inténtalo tú mismo. Lo prometo, la mayoría de las preguntas son mucho más fáciles que esta..
Mientras tanto, estoy en busca de una nueva pregunta más difícil! ¿Qué detalle de CSS crees que nadie sabe??
Nota del editor: Esto está escrito para Hongkiat.com por Kevin Yank. Kevin ha escrito sobre la web desde 1999, con libros sobre PHP, CSS y JavaScript a su nombre. También organizó podcasts, habló en conferencias y produjo videos de capacitación, todo sobre la Web. Ahora lidera el equipo de desarrollo en Sit the Test, una aplicación web para realizar y tomar exámenes en línea..
Más sobre Hongkiat:
- Diseño web: Altura de columna igual con CSS
- 6 trucos CSS para alinear contenido verticalmente
- Una mirada a las unidades CSS: píxeles, EM y porcentaje
- Una mirada a: CSS3 Box-Sizing
Ahora lea: 10 propiedades ocultas de CSS3 que debe saber
