Padding html, css y html5

HTML5 y CSS3 traen cosas nuevas para los diseñadores Web, bloggers y programadores, como la posibilidad de añadir bordes redondeados sin tener que usar imágenes, pero también hay algunas propiedades que se mantienen inalteradas como por ejemplo Padding, que usaremos para definir una distancia entre el borde de un "contenedor" y su contenido interior. Esta propiedad del código HTML y CSS se sigue empleando igual que siempre, así que este artículo es sólo para dar algunas pautas a aquellas personas que se están iniciando en el uso de este tipo de lenguajes.

¿Qué función tiene padding? Esta propiedad sirve para indicar a los navegadores la distancia que tienen que dejar entre el borde de un cuadro, bloque o sección y el contendio que vamos a insertar en su interior, sea este texto, una imagen, un vídeo u otros contenidos multimedia.

Hay que aclarar que la propiedad padding se usa igual en HTML o en CSS, la única diferencia es que en el primer caso nos referimos a un estilo que directamente se implementa en el cuerpo del documento HTML (o HTML5) y hay que escribirlo de forma individual para cada caja o contenedor, por ejemplo en un div.

En cambio el CSS o CSS3 se escribe fuera del cuerpo de la página Web o blog, y las propiedades que se asignan sirven para un grupo de elementos, por ejemplo en CSS de Blogger el padding puede dar el espacio que hay entre el texto de los post de un blog y la caja que contiene a cada uno de los textos.

¿Como se escribe padding? Es muy sencillo, se escribe la propiedad abriendo las comillas y a continuación se colocan 4 valores en pixeles (px) o en otra unidad. Los 4 valores van separados por un espacio, tal y como ves a continuación, y al final se coloca punto y coma, y se cierran las comillas.

CÓDIGO HTML

<div style="padding: 10px 10px 10px 10px;">
</div>

De esta forma existen 4 separaciones independientes que pueden ser 0 si en un lado del rectángulo no quieres espacio. La primera cifra se refierea al padding top, la distancia entre la parte superior del marco con el inicio del contenido, luego viene padding left que es el espacio que queda en el lado izquierdo del texto, padding down que da una separación debajo del texto o imagen, y por último el padding right que da la separación por la derecha. En el caso de que se los cuatro márgenes tengan el mismo valor se puede resumir en uno sólo.

CÓDIGO HTML

<div style="padding: 10px ;">
</div>

El efecto de padding lo puedes ver arriba en los ejemplos del código. En el título "código html" no se ha aplicado la propiedad y las letras están pegadas a los bordes del rectángulo. En cambio abajo puedes ver como las letras quedan separadas en una distancia de 10 pixeles por arriba, el lado izquierdo y abajo.