Márgenes Interiores

En este caso tratamos los márgenes o distancias entre un elemento y los bordes que lo rodean. Por ejemplo las celdas de una tabla. Si si si, quizás alguno de vosotros ya ha usado esto con algún programa, que le permite escoger estos márgenes, pero de lo que se trata con el CSS es de separar el contenido de la forma, como ya os he dicho varias veces. El programa define estos margenes dentro del body como lenguaje HTML y lo que queremos es hacerlo fuera de él, es decir, en la Hoja de Estilo. Así que pasad olímpicamente del uso de esos programas para hacer estas cosillas y hacerlo de esta otra forma.

La forma de definir estos márgenes es casi igual que en el caso anterior, pero ahora cambia el atributo, que en este caso es padding. Por ejemplo, para definir que todas las celdas tengan ciertos márgenes, insertaremos en la Hoja de Estilo la siguiente Regla CSS:

td { padding: valorsuperior valorderecho valorinferior valorizquierdo ;}

además respetando también ese orden y de nuevo SIN comas.

Si quisieramos que las todas las celdas que aparecen en nuestra web tuvieran color de fondo negro, color de texto blanco y unos márgenes internos de 20px por arriba y abajo y de 10px por los lados (macarra que es uno, je je) redefiniríamos el selector de celda de la forma siguiente en la Hoja de Estilo (o si solo lo queremos en una sola página, entre <style> y </style> tal y como vimos en seciones anteriores):

td { background-color:black ; color:white ; padding:20px 10px 20px 10px ; }

Si en cambio queremos que los márgenes sean de por ejemplo 20px por los cuatro costados, podemos resumir aún más, pues basta indicar padding:20px ; y listo.