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