Calcular márgenes porcentuales en CSS

La mayoría de los diseñadores web creen que saben muy bien CSS. Después de todo, no tiene tantas cosas: algunos tipos de selectores, docenas de propiedades y algunas reglas en cascada que apenas tiene que recordar porque se reducen al sentido común. Pero cuando se trata del nivel de detalle, hay muchos detalles vagos que los diseñadores realmente entienden.

Cuando revisé los resultados de las pruebas CSS gratuitas disponibles en línea durante los últimos seis meses, encontré casi Nadie Hazlo bienEntre los miles que tomaron la prueba, Menos del 14% entendió correctamente.

El problema se reduce a: ¿Cómo se calcula el margen porcentual?

asunto

Suponga que su sitio web tiene un contenedor div, dentro, contenido div:

Ahora vamos a darle a este contenido div Campo superior:

.content {
 margin-top: 10%;
 }
 

ok entonces es 10%... pero 10% Qué? Este es el problema Solo el 13,8% respondió correctamenteRecuerde: ¡Estas personas tienen acceso a Google!

Lo que me gusta de este tema es esto Parece que la respuesta debe ser obvia.Tanto es así que sospecho que la mayoría de la gente simplemente adivina (y se equivoca). No Te parece obvio. Quiero decir, si realmente usas tu imaginación, los navegadores pueden calcular dichos márgenes de diferentes maneras.

Entonces, si lo reduzco para usted, porque la pregunta en la prueba en realidad tiene muchas opciones. Aquí están sus opciones:

• 10% de la altura div del contenido
• 10% de la altura del div
• 10% del ancho de la sección de contenido
• 10% del ancho div del contenedor

Recuerda que solo el 13,8% de las personas puede elegir la respuesta correcta de esta lista. ¡Esto es peor que la casualidad!

Mire cuidadosamente la respuesta; Verá que en realidad solo hay dos cosas que necesita saber:

¿Contenedor o contenido?

ante todo El tamaño de los campos se basa en el tamaño del propio contenido div o el tamaño del contenedor div?

Eso no es para mí, pero probablemente puedas confiar en tu interior. Si configuro el 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 configuro en 25% (por lo que los porcentajes se suman al 100%). Por lo tanto, los límites porcentuales deben basarse en las dimensiones del contenedor.

Por supuesto, dos tercios de los que tomaron la prueba recibieron esta parte de la respuesta correctamente.

¿Ancho o alto?

segundo, es el tamaño de la parte superior del campo basado en el ancho o alto del elemento?

Si prestaste atención, probablemente estabas alerta. Debe ser una pregunta difícil para tan pocas personas elegir la respuesta correcta, ¿verdad?

Sin embargo, apuesto a que difícilmente lo creerás. La respuesta No Alto. Bueno, no es así.

Sí, aquí estamos hablando de la mayor ganancia. Sí, el tamaño de este campo es una medida vertical. Sí, si el bloque es el 50 % de la altura del contenedor y le asigna un límite superior del 25 %, entonces espera que sea el 25 % de la altura del contenedor. te equivocas.

No te sientas mal si crees que tiene que ser alto. Casi el 80% de los que tomaron la prueba estuvieron de acuerdo contigo:

Tiene sentido... no, ¡de verdad!

Todavía no creo que sea de Especificación W3C CSS:

El porcentaje se calcula en función del ancho del bloque contenedor que genera la caja. Tenga en cuenta que lo mismo ocurre con margin-top y margin-bottom.

Lo mismo ocurre con el forro superior e inferior, en caso de que te lo estés preguntando. En cuanto a la frontera, es ilegal indicar su ancho como un porcentaje.

Entonces, en este punto, podrías pensar que los creadores de CSS loco, o simplemente cometieron un error realmente estúpido. Pero estoy aquí para decirles que los márgenes verticales se basan en el ancho del bloque contenedor por dos buenas razones:

Consistencia horizontal y vertical

Por supuesto, hay una función abreviada que le permite especificar campos en los cuatro lados del bloque:

margin: 10%;

Esto se extiende a:

margin-top: 10%;
 margin-right: 10%;
 margin-bottom: 10%;
 margin-left: 10%;

Ahora, si escribió uno de los anteriores, probablemente esperaría que los márgenes fueran del mismo tamaño en los cuatro lados del bloque, ¿verdad? Pero si el margen izquierdo y el margen derecho se basan en el ancho del contenedor, y el margen superior y el margen inferior se basan en su altura, ¡por lo general son diferentes!

Evite las dependencias circulares

CSS coloca el contenido en bloques que se organizan verticalmente debajo de la página, por lo que el ancho de un bloque suele estar determinado completamente por el ancho de su padre. En otras palabras, puede Calcula el ancho de un bloque sin preocuparte de lo que es en este bloque.

La altura del bloque es otro asunto, por lo general la altura Depende de la combinación altura de su contenidoCambia la altura del contenido y cambias la altura del bloque. ¿Ves el problema?

Para obtener la altura del contenido, debe conocer los márgenes superior e inferior adjuntos. Si estos campos dependen de la altura del bloque principal, tiene problemas porque no puede calcular uno sin conocer el otro.

Basado en campos verticales ancho Los contenedores rompen esta dependencia circular y hacen posible el diseño de la página.

Más sobre Hongkiat:

Lea ahora: 10 características ocultas de CSS3 que necesita saber