Como asignar el tamaño a un elemento con CSS

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

Para tener en cuenta: 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”.

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:

Más sobre Diseño y desarrollo Web


Acerca de

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Diseño y Programación Web y Mobile. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios digitales. Dicto capacitaciones y consultorías sobre lenguajes y herramientas de desarrollo Web

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*


Cursos y capacitaciones para empresas y profesionales

  • HTML & CSS (maquetado web).
  • CSS3 & Responsive Web Design (diseño web adaptado a móviles y tablets).
  • Flexbox & Grids (técnicas modernas de CSS).
  • LESS & SASS (CSS preprocessors).
  • Responsive E-mail (diseño de emails multidispositivo).
  • Bootstrap (el framework de diseño más utilizado).
  • HTML5 (Nivel inicial y Avanzado + APIs).
  • PhoneGap/Cordova (Aplicaciones para Android e iOS basadas en lenguajes Web).
  • JavaScript (Nivel inicial y avanzado con ECMAScript 6).
  • jQuery (una de las librerías más famosas de JavaScript).
  • Angular (framework para construir aplicaciones Web con JavaScript).
  • PHP & MySQL (programación del lado servidor y bases de datos).

Encontrame en las redes sociales. Contactame.