Dimensiones en CSS

Dimensiones en CSS

Dimensiones en CSS

La forma de dar dimensiones en CSS a los objetos que componen una página web es uno de los puntos que nos pueden confundir cuando estamos aprendiendo a codificar Estilos en cascada.

Esto debido a que cada elemento de HTML tiene dos juegos de características que afectan de forma indirecta a las dimensiones: 

  • Si el elemento es es bloque o en línea.
  • Margin (márgenes) y padding (rellenos).

Los atributos que afectan de forma directa las dimensiones de un elemento son:

  • Width (Ancho).
  • Height (Alto).

Elementos en bloque o en línea

Un elemento en línea ocupa solamente el espacio que requiere para mostrar su contenido, es decir, no es posible designarle un ancho y alto, si se le agrega, no tiene efecto:

See the Pen Ancho y alto sin efecto (inline) by Miguel Méndez (@codigo-web) on CodePen.0

Tomando como base el ejemplo anterior, al cambiar la etiqueta <span> a bloque, el ancho y alto especificados surten efecto:

See the Pen Ancho y alto con efecto (bloque) by Miguel Méndez (@codigo-web) on CodePen.0

En el artículo Display en CSS puedes encontrar una explicación detallada acerca del atributo display.

Márgenes y rellenos

Los márgenes y rellenos generan un espacio entre elementos, el margen (margin) es un espacio hacia el exterior mientras que el relleno (padding) es un espacio hacia el interior.

El espacio que generan estos atributos aplican a cualquier elemento, sin importar si es en bloque o en línea.

En el artículo Márgenes y rellenos con CSS puedes encontrar una explicación detallada de estos atributos.

Ancho (Width) y Alto (Height)

Define el ancho y alto del elemento, son las dimensiones del área donde aparece el contenido.

Dimensiones totales

Es muy importante señalar que las dimensiones totales de un elemento no siempre es lo que se estableció con los valores de width y height. A estos valores es necesario sumar los valores del margen, borde y padding.

Ancho y alto totales
Ancho y alto totales
Cualquier elemento en bloque, si no se especifican su ancho (width) y su alto (height), por omisión ocupará el máximo espacio disponible a lo ancho y ajustará su altura para abarcar el elemento o elementos que se encuentren en su interior.

See the Pen width-height by Miguel Méndez (@codigo-web) on CodePen.0

Medidas máximas y mínimas

Además de los atributos vistos con anterioridad -Ancho (width), Alto (height), Margen (margin) y Relleno (padding)-, en muchas ocasiones es necesario establecer topes máximos y mínimos referentes al ancho y al alto que deben ocupar los elementos.

El uso adecuado de estos atributos es especialmente útil al diseñar sitios que se adaptan a diferentes dispositivos (responsivos), así como al aplicarlos sobre imágenes, ya que así estas conservan sus proporciones.

De igual manera que width y height, aplican para elementos en bloque.

Ancho

MAX-WIDTH

Establece el ancho máximo de un elemento. Si el ancho del elemento excede este valor, se ajusta para no sobrepasar la dimensión establecida en este atributo.

MIN-WIDTH

Establece el ancho mínimo de un elemento. Si el ancho del elemento es menor al establecido, se ajusta para mostrarse, por lo menos del ancho establecido con este atributo.

Cabe mencionar que max-width tiene preferencia sobre width, mientras que min-width tiene preferencia sobre max-width.

Ejemplo

Establecemos que un bloque de texto ocupe el 80% del espacio disponible.

En caso de una pantalla de teléfono, es probable que el 80% se convierta en un espacio muy reducido, para asegurarnos que no sea tan angosto el espacio, establecemos un valor mínimo, digamos 460 pixeles.

En una computadora de escritorio con una resolución alta, el 80% podría ser un espacio demasiado considerable, dificultando la lectura, por lo que definimos un valor máximo, digamos 960 pixeles.

See the Pen max_min_width by Miguel Méndez (@codigo-web) on CodePen.0

Uso de max-width, width y min-width
Uso de max-width, width y min-width
* La imagen del ejemplo no refleja proporciones reales.

Alto

MAX-HEIGHT

Establece el alto máximo de un elemento. Si el alto del elemento excede este valor, se ajusta para no sobrepasar la dimensión establecida en este atributo.

MIN-HEIGHT

Establece el alto mínimo de un elemento. Si el alto del elemento es menor al establecido, se ajusta para mostrarse, por lo menos del alto establecido con este atributo.

De igual forma que con el ancho, max-height tiene preferencia sobre height, mientras que min-height tiene preferencia sobre max-height.

Ejemplo

Deseamos tres columnas con imágenes que en origen son de diferentes tamaños, pero necesitamos que se vean con la misma altura.

See the Pen max_min_height by Miguel Méndez (@codigo-web) on CodePen.0

* En el ejemplo se estableció para las imágenes una altura máxima de 200 pixeles. Para ajustar esa altura, las imágenes se escalaron. Esta es una buena técnica para no distorsionar su apariencia.

Box-sizing

box-sizing: content-box;

Por omisión, el ancho o alto total de un elemento se determina por:

El valor del atributo width (ancho) o height (alto) + el valor del padding (relleno) + el valor del atributo border (borde) + el valor del margin (margen).

Dimensiones totales con box-sizing: content-box;

See the Pen box-sizing_content-box by Miguel Méndez (@codigo-web) on CodePen.0

* En el ejemplo, el ancho total se determina por la suma del ancho del área de contenido (380 pixeles), mas el relleno (40 pixeles del lado izquierdo mas 40 pixeles del lado derecho), mas el borde (5 pixeles del lado izquierdo mas 5 pixeles del lado derecho), mas el margen (40 pixeles del lado izquierdo mas 40 pixeles del lado derecho).

Lo mismo ocurre para determinar la altura total.
box-sizing: border-box;

Opcionalmente, es posible cambiar el valor de box-sizing por border-box, la diferencia es que el ancho o alto total del elemento se determina por:

El valor del atributo width (ancho) o height (alto)  + el valor del margin (margen).

Dimensiones totales con box-sizing: border-box;

See the Pen box-sizing_border-box   by Miguel Méndez (@codigo-web) on CodePen.0

* En el ejemplo, el ancho total se determina por la suma del ancho del área de contenido (380 pixeles) mas el margen (40 pixeles del lado izquierdo mas 40 pixeles del lado derecho).

Lo mismo ocurre para determinar la altura total.

Mucha gente prefiere esta forma, debido a que es mucho mas sencillo dar relleno a un elemento sin tener que recalcular su ancho.

Overflow

Como se vio anteriormente, por omisión, las dimensiones de los elementos se ajustan para que el contenido se muestre de forma completa.

Utilizando los atributos mencionados podemos tener control de las medidas deseadas, sin embargo, en algunas ocasiones el contenido excede estas medidas y se busca que la caja que lo contiene no crezca de tamaño.

Para estos casos, se utiliza el atributo overflow, con el cual se define que hacer con el “excedente” de contenido:

  • Hidden: Oculta el excedente:

See the Pen overflowHidden by Miguel Méndez (@codigo-web) on CodePen.0

  • Scroll: Agrega barras de scroll para poder visualizar lo que haya quedado oculto.

See the Pen overflowScroll by Miguel Méndez (@codigo-web) on CodePen.0

  • Auto: Incluye las barras de scroll solo de ser necesario:

See the Pen overflowAuto by Miguel Méndez (@codigo-web) on CodePen.0

Conclusión

La forma en que se manejan las dimensiones en CSS puede no ser tan obvias y crear un poco de confusión, pero utilizando esta guía y con un poco de práctica, seguramente lograrás dar las dimensiones adecuadas a cada uno de los elementos de una página web.

Desarrollador web desde 1994 e instructor de Diplomados de Web y Web Avanzado en diversas instituciones públicas y privadas.
¿Te fue útil el artículo? Por favor ayúdanos a difundirlo compartiéndolo a través de tus redes sociales.

Autor: Miguel Méndez

Desarrollador web desde 1994 e instructor de Diplomados de Web y Web Avanzado en diversas instituciones públicas y privadas.

Déjanos un comentario

Sé el primero en comentar

avatar
wpDiscuz