X

Tamaño, margen, relleno y bordes de capas con CSS y HTML

Los conceptos de márgenes, relleno y bordes, sencillos en su naturaleza, son un verdadero rompecabezas para los que se inician en la maquetación. En este artículo damos una detallada explicación.

El empleo de capas, es lo que hace que los contenidos de una página web se ubiquen en el sitio que el diseñador desea.

Las capas, pueden ser dimensionadas empleando los atributos que definen el ancho y la altura de las capas. Sin embargo, el empleo de otros atributos puede hacer que el ancho y la altura finales se vea modificado.

Dimensiones de las capas

El tamaño de las capas en CSS se fija mediante los atributos “width” (ancho) y “height” (alto), empleando para ello cualquiera de las unidades que están permitidas.

De no marcarse estas dimensiones, las capas adquieren las dimensiones del contenido. Sin embargo, esto puede verse afectado por la aplicación de tres atributos de las capas: márgenes, relleno y bordes.

Los márgenes son el espacio que hay entre la capa y cualquier objeto adyacente. El borde es la línea que delimita la capa. El relleno, es el espacio entre el borde de la capa y el contenido.

En la siguiente imagen veremos cada uno de estos atributos en su posición:

A continuación, haremos una descripción de cada uno de estos atributos y veremos como se aplican en el código CSS.

Márgenes

Cada capa tiene cuatro márgenes, los que por defecto tienen un valor cero.

En el código CSS, el margen se establece mediante el atributo “margin”, el cual es seguido de un guión (sin dejar espacio) y el lado de la capa al cual se le determina el margen.

Existen métodos abreviados (empleando una sola línea de código para determinar todos los márgenes), que describimos a continuación:


/* El siguiente es el método natural de establecer los márgenes */#identificador    {
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
/* Su forma abreviada sería la siguiente: */#identificador    {
margin: 10px;
}
/* Cuando los márgenes superior e inferior tienen las mismas dimensiones 
y el izquierdo y el derecho diferentes pero iguales entre si, el código abreviado 
es el siguiente, siendo la primera cifra la que corresponde a los márgenes 
superior e inferior y la segunda a la izquierda y derecha */#identificador   {
margin: 10px 5px;
}
/* Cuando los márgenes derecho e izquierdo tienen el mismo valor, y 
los márgenes superior e inferior son diferentes y además, diferentes 
entre si, la forma de abreviar es la que sigue, siendo la primera 
cifra del margen superior, la segunda de los márgenes laterales y la 
tercera del margen inferior */#identificador    {
margin: 5px 15px 2px;
}
/* Cuando todos los márgenes son diferentes, el modo de abreviar es el 
que describimos a continuación, siendo las cifras de los márgenes 
superior, derecho, inferior e izquierdo respectivamente: */#identificador    {
margin: 3px 10px 6px 8px;
}

Relleno (Padding)

El relleno se determina del mismo modo que los márgenes.

Al igual que en el caso anterior, por defecto, cada capa tiene relleno cero, por lo que para que pueda ser visible debe determinarse su valor en el código CSS.

Al igual que en el caso de los márgenes, el relleno se determina lado por lado, a menos que se emplee el método abreviado, que es igual que el empleado en los márgenes.

Borde (Border)

El borde es el límite de la capa. A diferencia de los dos atributos anteriores, el borde tiene tres propiedades que puedes ser determinadas en el código CSS.

La siguiente es una lista de estas propiedades y la forma en que se determinan:

Ancho border-width thin, medium, thick (También puede emplearse una medida de longitud)
Color border-color Color o transparente
Estilo border-style none, hidden, dotted, dashed, solid, double, groove, ridge, inset y outset

En la siguiente imagen veremos un ejemplo de los estilos de los border:

Al igual que en los casos de los márgenes y los rellenos, cada uno de estos atributos puede ser simplificado. Así que puede colocarse “border-color:” y determinar el color de los cuatro bordes, o “border-width:” y determinar el ancho de todos los bordes en una sola línea de código.

Incidencia de los distintos atributos en el tamaño de las capas

El dimensionamiento de una capa no termina cuando se determina los valores de “width” y “height”. Salvo para las versiones anteriores a Internet Explorer 7, todos los navegadores entienden que el ancho (“width”) y el alto (“height”) es independiente de los valores que tomen los márgenes, los rellenos y los bordes.

Por lo que para saber el ancho o la altura total de una capa, a los valores respectivos hay que sumar los márgenes, rellenos y bordes laterales al ancho o sumar los márgenes, rellenos y bordes superior e inferior a la altura.

Veamos un ejemplo:

Crear dos archivos en bloc de notas. En el primero, copiaremos el siguiente código y lo guardaremos en cualquier directorio con el nombre estilo.css:


#contenedor {
width: 52%;
margin: 50px auto;
border: solid 1px #000;
font: 1em arial, helvetica, sans-serif;
color: white;
}
#nada, #borde, #relleno, #margen, #todos {
background-color: #360;
border: solid #08f;
width: 400px;
}
#nada {
margin: 0;
padding: 0;
border-width: 0;
}
#borde      {
margin: 0;
padding: 0;
border-width: 20px;
}
#relleno    {
margin: 0;
padding: 20px;
border-width: 0;
}
#margen     {
margin: 20px;
padding: 0;
border-width: 0;
}
#todos      {
margin: 20px;
padding: 20px;
border-width: 20px;
}

Al segundo archivo, al que guardaremos en el mismo directorio que el anterior, le daremos el nombre index.html e introduciremos en él el siguiente código:


<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
 <title>Página de ejemplo</title>
 <link type="text/css" rel="stylesheet" href="estilo.css" />
</head>
<body>
 <div id="contenedor">
 <div id="nada">Este contenedor no tiene márgenes, relleno ni bordes. 
        El único espacio que ocupa es el del contenido.</div>
 <div id="borde">Este contenedor tiene el espacio que ocupa el contenido y un borde de 5 pixeles.</div>
 <div id="relleno">Este contenedor tiene contenido y un relleno (padding) de 5 pixeles.</div>
 <div id="margen">Este último contenedor, tiene el contenido y un margen de 5 pixeles.</div>
 <div id="todos">Y en el último contenedor, vemos todos los atributos con valores definidos.></div>
 </div>
</body>
</html>

Importante: Colocar la declaración del tipo de documento (DOCTYPE), puede ser la diferencia entre ver bien o no el ejercicio que estamos llevando adelante, sobre todo si empleamos Internet Explorer como navegador, en cualquiera de sus versiones.

Luego de guardados, abriremos el archivo index.html en nuestro navegador, y en él veremos la siguiente imagen:

Para hacer que todas las capas tengan el mismo ancho (incluyendo los rellenos y los bordes, debemos sumar éstos al ancho de la capa y darle a las capas que no tienen todos los atributos, el valor ajustado del ancho. Para ello debemos hacer las siguientes operaciones:

Ancho de la capa con todos los atributos:

Ancho + margen izq. + margen der. + relleno izq. + relleno der. + borde izq. + borde der. =

400px + 20px + 20px + 20px + 20px + 20px + 20px = 520px

Ancho de la capa con un solo atributo definido:

Ancho + atributo izq. + atributo der. =

400px + 20px + 20px = 440px

Para que la capa sin atributos definidos (con valor cero) se vea del mismo ancho que la que tiene todos los atributos, debemos darle un valor de ancho (width) igual a 520 pixeles.

A las que tienen uno de sus atributos definidos con un ancho de 20 pixeles por cada lado, el acho (width) debe ser de 480 pixeles. La capa que tiene todos los atributos definidos, quedará con el ancho original de 400 pixeles.

El código CSS quedaría de la siguiente manera:


#contenedor {
width: 520px;
margin: 50px auto;
border: solid 1px #000;
font: 1em arial, helvetica, sans-serif;
color: white;
}
#nada, #borde, #relleno, #margen, #todos {
background-color: #360;
border: solid #08f;
}
#nada {
margin: 0;
padding: 0;
border-width: 0;
width: 520px;
}
#borde      {
margin: 0;
padding: 0;
border-width: 20px;
width: 480px;
}
#relleno    {
margin: 0;
padding: 20px;
border-width: 0;
width: 480px;
}
#margen     {
margin: 20px;
padding: 0;
border-width: 0;
width: 480px;
}
#todos      {
margin: 20px;
padding: 20px;
border-width: 20px;
width: 400px;
}

La siguiente imagen nos muestra el resultado de la modificación del codigo CSS:

Conclusión

El manejo de las dimensiones de la página es determinante, y suele ser uno de los principales problemas con los que se enfrentan los principiantes cuando se inician en la maquetación empleando hojas de estilo en cascada.

Esto se debe fundamentalmente a la falta de compresión de cómo deben tomarse las dimensiones de los bordes, rellenos y márgenes.

modificado el 3 junio, 2018 14:10

Andres Fernandez: Diseñador web y gráfico afincado en Uruguay. Ha trabajado como freelance para empresas de toda Latinoamérica y España. Apasionado del diseño y autodidacta por naturaleza, gran parte de lo que sabe lo ha aprendido de sitios como este.
Artículos relacionados