Warning: include(/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/includes/framework.php on line 2

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/includes/framework.php on line 2

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/libraries/phputf8/view.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/includes/framework.php on line 4

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/libraries/phputf8/view.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/includes/framework.php on line 4

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/administrator/manifests/packages/include.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/includes/framework.php on line 14

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/administrator/manifests/packages/include.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/includes/framework.php on line 14

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/templates/virtualnautaejemplo/classes/header.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/includes/framework.php on line 16

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/templates/virtualnautaejemplo/classes/header.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/includes/framework.php on line 16

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/libraries/phputf8/view.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/includes/framework.php on line 18

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/libraries/phputf8/view.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/includes/framework.php on line 18

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/components/com_search/views/object.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/libraries/import.php on line 6

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/components/com_search/views/object.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/libraries/import.php on line 6

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/administrator/language/en-GB/footer.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/libraries/import.php on line 8

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/administrator/language/en-GB/footer.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/libraries/import.php on line 8

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/libraries/import.php on line 10

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/libraries/import.php on line 10

Warning: include(/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php) [function.include]: failed to open stream: No such file or directory in /home/content/20/9214920/html/joomla/libraries/import.php on line 12

Warning: include() [function.include]: Failed opening '/var/chroot/home/content/20/9214920/html/joomla/plugins/search/weblinks/page.php' for inclusion (include_path='.:/usr/local/php5_3/lib/php') in /home/content/20/9214920/html/joomla/libraries/import.php on line 12

Warning: session_start() [function.session-start]: Cannot send session cookie - headers already sent by (output started at /home/content/20/9214920/html/joomla/includes/framework.php:2) in /home/content/20/9214920/html/joomla/libraries/joomla/session/session.php on line 532

Warning: session_start() [function.session-start]: Cannot send session cache limiter - headers already sent (output started at /home/content/20/9214920/html/joomla/includes/framework.php:2) in /home/content/20/9214920/html/joomla/libraries/joomla/session/session.php on line 532
Padding en CSS - Virtualnauta.com - Tutorial CSS

CSS Relleno

Deja un espacio entre el elemento y los bordes del mismo.


Relleno con CSS

El relleno se comporta exactamente igual que los márgenes con la excepción que deja el espacio blanco entre el elemento y los bordes, o en caso que no posea bordes, con el margen.

Modelo de cajas

Las propiedades del relleno padding nos permiten definir el ancho de los mismos.


El relleno - padding

La propiedad padding se utiliza para definir el ancho del espacio que se encuentra entre el elemento y el borde del mismo.

Esta propiedad define el ancho para los cuatro lados de la caja.

Sintaxis

<head>
<style="type:text/css">
selector {padding: valor}
</style>
</head>

Los posibles valores para definir los anchos de padding

longitud | %

Ejemplo

Vamos a ver como se comporta un texto con un relleno de 10% alrededor.

Código
<head>
<style type="text/css">
p.relleno{padding:10%}
</style>
</head>

<body>
<p>En este ejemplo podemos observar que el relleno
se aleja de los borde un 10% en base al tamaño de la
caja que lo contiene.Al no haber definido los bordes o
los margenes, el ancho del relleno es la distancia
definida.</p>
</body>
Resultado

En este ejemplo podemos observar que el relleno
se aleja de los borde un 10% en base al tamaño de la caja que lo contiene. Al no haber definido los bordes o los margenes, el ancho del relleno es la distancia definida.


El relleno de cada lado - padding-top, padding-right, padding-bottom, padding-left

Las propiedades padding-top, padding-right, padding-bottom, padding-left se utilizan para definir los anchos de los rellenos de cada uno de los bordes por separado.
Puedes definir los 4 lados o solo aquellos que necesites.

Sintaxis

<head>
<style="type:text/css">
selector {
padding-top: valor
padding-right: valor
padding-bottom: valor
padding-left: valor
}
</style>
</head>

Los posibles valores para definir los anchos de padding

longitud | %

Ejemplo

Vamos a definir el ancho de cada lado por separado.

Código
<head>
<style type="text/css">
p{
padding-top:30px
padding-right:10px
padding-bottom:20px
padding-left:50%
}
</style>
</head>

<body>
<p>Este texto tiene definido un ancho distinto para cada
lado del elemento.</p>
</body>
Resultado

Este texto tiene definido un ancho distinto para cada lado del elemento.


Tabla de las propiedades de padding (relleno)

PropiedadDescripciónValoresDetallesEj.
padding Tamaños para varios padding individuales.

padding-top: ancho del padding superior.

padding-right: ancho del padding derecho.

padding-bottom: ancho del padding inferior.

padding-left: ancho del padding derecho.
longitud Longitud Ejemplo de como definir el ancho del padding
% Porcentaje Ejemplo de como definir el ancho del padding en porcentajes


<<< Tablas - Table en CSS Bordes - Border en CSS >>>

En la Web