Editar dimensiones de objetos con código CSS

Trabajar en la edición de sitios web utilizando el código CSS puede resultar un tanto complejo, pero es una forma muy recomendable para un control total sobre cada parámetro y elemento de nuestra web. Al codificar Estilos en cascada, darle diferentes tamaños a cada objeto mediante CSS puede resultar un tanto confuso. Te contamos paso a paso cómo modificar los elementos para crear la web según tus propios intereses.

Cada elemento HTML que configuramos tiene dos juegos de características distintas, y estas a su vez afectan las dimensiones finales del elemento. Primero hay que diferenciar si el objeto es en bloque o en línea. Luego hay que tener en cuenta los parámetros de Margen (margin) y Rellenos (padding). Los elementos que afectan las dimensiones de nuestro elemento en la web son el Ancho (Width) y el Alto (Height).

Si el elemento que vamos a modificar está en línea, es aquél elemento que únicamente necesita espacio suficiente para mostrar el contenido. No se puede asignar alto ni ancho, en caso de configurar estas características para un objeto en línea, no veremos ningún cambio porque no hace efecto. Si cambiamos el código CSS y añadimos a la línea de código el parámetro display:block, entonces veremos que los apartados de altura y ancho pasan a surtir efecto.

Te puede interesar: CSS, creando hojas de estilo enlazadas

Configuración de márgenes y rellenos

Tanto los márgenes como los rellenos crean un espacio entre los distintos componentes de una web. El margen es un espacio para diferenciar el objeto del exterior, mientras que el relleno es una forma de limitar el contenido hacia el interior del elemento. Es importante remarcar que no importa si el objeto es el bloque o en línea, cuando se modifican los atributos de margen y relleno los cambios siempre se ven aplicados.

En materia de ancho y alto, son dos características que marcan el área donde aparecerá el contenido de cada objeto. Sin embargo, la dimensión total de un elemento no es únicamente el espacio delimitado por alto y ancho. También se le debe sumar el valor de los márgenes, bordes y relleno. De esta forma obtendremos la información total sobre el espacio que ocupa en nuestra web un determinado elemento. Hay que tener en cuenta que los valores muchas veces tienen límites, mayores y menores. De lo contrario se podrían crear gigantescos o microscópicos elementos. Seguiremos analizando componentes para las dimensiones en CSS en el próximo post.