Unidad 3. Aspecto de la página. Estilos básicos (V)


3.3. Bordes

Podemos agregar un borde alrededor de un elemento html, con la propiedad border. Esta propiedad engloba las tres propiedades del borde.

  • color, un color RGB. Se define con la propiedad border-color. Por ejemplo, border-color: blue; o border-color: #F37760;.
  • grosor, normalmente expresado en px. se define con la propiedad border-width. Por ejemplo, border-width: 2px;.
  • estilo, uno de los estilos o aspecto que puede tener el borde. Puede ser cualquiera de los siguientes, que definimos con la propiedad border-style:

none dotted dashed solid double groove ridge inset outset

Por lo tanto, podríamos definir el borde de un elemento de la siguiente manera:

<p style="border-color:#009933; border-width: 3px; border-style:double;">bordes</p>

bordes

En este caso, podemos resumirlo con el atributo border, siguiendo el formato border: color grosor estilo;, lo que quedaría border:#009933 3px double;.

Cada elemento tiene cuatro bordes, que podríamos definir de forma independiente, como border-top, border-right, border-bottom y border-left. A su vez, para cada uno de ellos podemos definir su color, grosor y estilo de forma independiente, por ejemplo border-bottom-color o border-top-width.

Si no sabes como referirte a los distintos lados de un elemento, visita este básico Básico.

3.4. Márgenes

Los elementos html tienen dos márgenes. El margen externo y el margin interno. Ambos se refieren a la la distancia hacia uno u otro lado con respecto al borde del elemento, a su límite, independientemente de que el borde sea visible o no.

El margen externo se regula con la propiedad margin. El margen exterior es la distancia mínima que habrá entre el borde exterior del elemento y el elemento siguiente, por cada uno de sus cuatros lados.

margin: 0
margin: 0
margin:5px
margin:5px 35px
margin:15px
margin: 0
margin-left:-20px

Los margenes no se suman, se solapan, prevaleciendo el mayor. Así, si un párrafo tiene un margen inferior de 50px y el de abajo un margen superior de 30px, entre ellos quedará un margen de 50px, por ser el mayor, pero no de 70px.

Otro valor que podemos dar al margen es auto. Este valor da a ambos márgenes el mismo valor, y nos permite, por ejemplo, horizontalmente un elemento con una anchura determinada.

El margen está fuera del elemento. Observa, por ejemplo que no mantiene el color de fondo del elemento.

El margen interno se regula con la propiedad padding. Se refiere a la distancia que hay ente el borde del elemento y su contenido, por ejemplo el texto.

padding: 0
padding: 0
padding:5px
padding:5px 35px
padding:15px
padding: 0
padding-bottom:20px

El padding si que forma parte del elemento, por eso muestra el mismo fondo.

 

Por defecto, la mayoría de elementos incluyen un margen exterior, y algunos un margen interior, que debemos de tener en cuenta.

Veamos un ejemplo con lo que hemos visto. Ve cambiando los valores:

<html>
<head>
<title>Bordes y m&aacute;rgenes</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> </head>
<body style="background-color:whitesmoke; font-family: sans-serif;">
<h1 style="font-size: 120%; background-color: #99CCFF; color: #FFFFFF; border-color: #6666FF;
border-style: solid; border-width: 0 0 2px 5px; padding-left: 20px;">Bordes y m&aacute;rgenes</h1>
<p style="background-color:#99CCFF; margin: 0;">&Eacute;ste es un p&aacute;rrafo sin margen.</p>
<p style="background-color:#99CCFF; margin: 0;">&Eacute;ste es otro p&aacute;rrafo sin margen.</p>
<p style="background-color:#99CCFF; margin: 20px;">&Eacute;ste es un p&aacute;rrafo con margin:20px.</p>
<p style="background-color:#99CCFF; margin: 20px;">&Eacute;ste es un p&aacute;rrafo con margin:20px.</p>
<p style="background-color:#99CCFF; margin: 20px; padding: 10px">&Eacute;ste es un p&aacute;rrafo con
margin:20px y padding:10px.</p>
<p style="background-color:#99CCFF; margin: 20px; padding: 10px; border: cyan 4px inset">&Eacute;ste
es un p&aacute;rrafo con margin:20px, padding:10px y border: cyan 4px inset</p>
<p style="background-color:#99CCFF; margin-right:25%;">&Eacute;ste es un p&aacute;rrafo con margin-right:25%.<br />
Cambia al cambiar la ventana.</p>
</body>
</html>

Puedes copiar el código y pegarlo en la caja de texto que encontrarás en esta página Probar código .


Enero-2010
Pág. 3.5

Atrás  Inicio  Adelante




.