Mediante las hojas de estilo podremos definir las características de presentación de los elementos HTML.
Para lograr esto, CSS nos ofrece un conjunto, cada vez más amplio, de propiedades que pueden asignarse a los elementos de nuestros documentos HTML.
Pero ahora vayamos a una de las preguntas que surgen siempre en mis primeras clases, cuando los alumnos están comenzando a familiarizarse con las hojas de estilo y HTML. Y esa duda apunta a como establecer el tamaño de los elementos.
Para esto, CSS nos ofrece dos propiedades imprescindibles: width (ancho) y height (alto). Es importante destacar que estas características recibirán un valor numérico (aunque a partir de las nuevas versiones de CSS también soportan variables) y que deben tener unidades especificadas (por ejemplo px, em o rem, entre otras posibles).
¿Qué elementos pueden recibir estas propiedades? La respuesta más simple es que las cajas son las que pueden tener establecido un ancho y un alto desde CSS. Algunos ejemplos serían: div, img y las cajas de texto (ej: p, h1, etc). También aplica a las nuevas cajas semánticas de HTML5, como el caso de section, article, main, header, aside y footer, entre muchas otras.
¿Podemos ver un ejemplo de como se aplica? Por supuesto. Imaginemos un div, cuya id es caja1, y deseamos establecer un ancho de 400px y un alto de 250px. En ese caso podríamos escribir en nuestro CSS un código como el siguiente:
#caja1{
width: 400px; height:250px;
}Recordemos siempre que los pares propiedad/valor en CSS se deben separar con punto y coma ( ;).
Más allá del ancho y el alto
Aplicar el tamaño a un elemento con CSS, en general se basa en las propiedades ancho y alto, pero también hay otros conceptos que tenemos que tener en cuenta.
Por ejemplo, una caja, como puede ser un div, aunque tenga asignado ancho y alto, no será visible si no tiene un contenido o un color de fondo o un borde. Por defecto es transparente.
Otro aspecto a tener en cuenta es que hay otras características que afectan las dimensiones de las cajas, por ejemplo el padding, que podría entenderse como el relleno de la caja, es decir el espacio entre el contenido y el borde. Esta característica se suma al ancho y al alto, y se expresa de manera numérica con una unidad, como las mencionas px o em. Si deseamos que el padding no se sume al ancho y al alto, desde CSS podremos especificar box-sizing: border-box. De esta manera, cambiamos el modelo de caja y el padding no se suma al ancho y el alto y se cuenta «hacia adentro».
El artículo sobre box-sizing de MDN aporta más información sobre esta característica y ejemplos visuales sobres el tema.
Para completar, es importante tener muy en cuenta que si asignamos width y height a una caja de texto esto afectará sus dimensiones, pero no modificará el tamaño o proporciones del texto. Si lo que deseamos es cambiar el tamaño de texto, siempre desde CSS, lo podemos hacer con la propiedad font-size.
Lecturas recomendadas
En este artículo hemos aprendido los conceptos básicos acerca de como asignar el tamaño a un elemento con CSS.
Para conocer más sobre el tema les recomiendo los siguiente artículos que escribí: