Podemos agregar un borde alrededor de un elemento html, con la propiedad border. Esta propiedad engloba las tres propiedades del borde.
border-color. Por ejemplo, border-color: blue; o border-color: #F37760;.border-width. Por ejemplo, border-width: 2px;.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 
.
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.
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.
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á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árgenes</h1>
<p style="background-color:#99CCFF; margin: 0;">Éste es un párrafo sin margen.</p>
<p style="background-color:#99CCFF; margin: 0;">Éste es otro párrafo sin margen.</p>
<p style="background-color:#99CCFF; margin: 20px;">Éste es un párrafo con margin:20px.</p>
<p style="background-color:#99CCFF; margin: 20px;">Éste es un párrafo con margin:20px.</p>
<p style="background-color:#99CCFF; margin: 20px; padding: 10px">Éste es un párrafo con
margin:20px y padding:10px.</p>
<p style="background-color:#99CCFF; margin: 20px; padding: 10px; border: cyan 4px inset">Éste
es un párrafo con margin:20px, padding:10px y border: cyan 4px inset</p>
<p style="background-color:#99CCFF; margin-right:25%;">Éste es un pá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 .
Cursos Informática Gratuitos Síguenos en: Facebook Sobre aulaClic Política de Cookies
© aulaClic S.L. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.