Controles adicionales de tamaño y diseño

Si alguna vez te has visto recurriendo a propiedades CSS personalizadas para ajustar el tamaño y el diseño de un elemento, ¡las nuevas incorporaciones al panel de Estilos te ayudarán a hacerlo! Ahora puedes configurar opciones de box-sizing, recortar contenido desbordado y ajustar la alineación vertical directamente desde el panel de Estilos.

Recortar contenido desbordado

La propiedad Overflow en el panel de Estilos > Tamaño ahora admite el valor clip. Si experimentas comportamientos inesperados con elementos "fijos" que tienen overflow configurado como hidden, prueba a usar el nuevo valor clip en su lugar.

‍

Controla el box-sizing

El comportamiento predeterminado de box-sizing para todos los elementos en Webflow es border-box. Por lo general, este es el comportamiento deseado para elementos con tamaños predecibles, pero es posible que prefieras otra opción al dar estilo a un elemento multimedia con borde. Ahora puedes controlar el box-sizing directamente desde el panel de Estilos > Tamaño, sin necesidad de usar CSS personalizado.

Ahora hay dos opciones disponibles:

• Border-box: hace que el ancho y el alto del elemento incluyan el contenido, el relleno (padding) y el borde. Las dimensiones totales de la caja no aumentan, independientemente del tamaño del relleno y del borde.
• Content-box: hace que el ancho y el alto del elemento incluyan solo el contenido. El tamaño del relleno y del borde se añade fuera de las dimensiones de la caja.

Pruébalo en un elemento con relleno y borde para observar la diferencia.

Ajusta la alineación vertical

A menudo, cuando tienes varios elementos mostrados en línea (como un icono y algo de texto), quieres centrarlos verticalmente o alinearlos entre sí. Ahora puedes controlar esta alineación vertical desde el panel de Estilos > Diseño.

Cuando la propiedad display está configurada como inline o inline block, encontrarás una nueva propiedad align y con una variedad de opciones para elegir.

Accede rápidamente a la vista previa de CSS

A veces querrás observar qué estilos se están generando para un selector determinado. Además de los nuevos controles de tamaño y diseño, esta actualización también hace que la función de vista previa de CSS sea más accesible. Ahora puedes abrir la vista previa de CSS desde el menú "..." (o "Más opciones") en la parte superior del panel de Estilos.

Esperamos que este conjunto de actualizaciones te brinde más flexibilidad sobre cómo se dimensionan y alinean tus elementos. Para obtener más información sobre tamaño y diseño, consulta la documentación en Webflow University.