AgerNic.com
WEB DEVELOPER SITE, HTML, CSS, PHP, SQL

Relleno CSS


Next Page >>
HTML images

CSS Tutorial » Relleno CSS

Relleno CSS definicion

Cada elemento que se puede mostrar en una página web se compone de uno o más cuadros rectangulares.

Las propiedades de relleno CSS le permiten establecer el espacio entre el contenido de un elemento y su borde (o el borde del cuadro del elemento, si no tiene un borde definido).

El relleno se ve afectado por el color de fondo del elemento. Por ejemplo, si establece el color de fondo de un elemento, será visible a través del área de relleno.

Este elemento tiene un relleno de 30px.

 

Definir relleno para lados individuales

Puede especificar los rellenos CSS para los lados individuales de un elemento, como los lados superior, derecho, inferior e izquierdo, utilizando las propiedades:

Las propiedades de relleno se pueden especificar utilizando los siguientes valores:

Ejemplo

<!DOCTYPE html>
<html>
<head>
<style>
div {
background-color: lightblue;
padding-top: 40px;
padding-right: 20px;
padding-bottom: 60px;
padding-left: 26px;
}
</style>
</head>
<body>

<h2>Usar propiedades de relleno individuales</h2>

<div>Este elemento div tiene un relleno superior de 40 px, un relleno derecho de 20 px, un relleno inferior de 60 px y un relleno izquierdo de 26 px.</div>

</body>
</html>

Note: No se permiten valores negativos.

Etiquetas: relleno css, relleno superior css, relleno texto css, area de relleno css, marjen y relleno css, relleno css definicion, texto sin relleno css, css relleno color, relleno de css

 

La propiedad de taquigrafía de relleno CSS

La propiedad padding es una propiedad abreviada para evitar configurar el padding de cada lado por separado, es decir:

Pues así es como funciona:

Si la propiedad de relleno tiene cuatro valores:

Padding: 20px 40px 65px 90px;
el relleno superior es de 20px
el relleno derecho es 40px
el acolchado inferior es de 65 px
el relleno izquierdo es 90px

 

Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>Establecer relleno para todos los lados a la vez</title>
<style>
h1 {
padding: 40px; /* aplicar a los cuatro lados */
}
p {
padding: 25px 10px; /* arriba abajo 25px cada lado | izquierda y derecha 10px cada lado */
}
div {
padding: 20px 30px 10px; /* arriba 20px | izquierda y derecha 30px cada lado | 10px abajo */
}
pre {
padding: 25px 50px 75px 100px; /*arriba 25px | derecha 50px | abajo 75px | izquierda 100px */
}
h1, p, div, pre {
background-color: #80E6FF;
}
</style>
</head>
<body>
<h1>Este es un titulo. Este es un titulo. Este es un titulo.</h1>
<p>Este es un simple párrafo de texto. Este es un simple párrafo de texto. Este es un simple párrafo de texto.</p>
<div>Este es un elemento caja DIV. Este es un elemento caja DIV. Este es un elemento caja DIV. Este es un elemento caja DIV.</div>
<pre>Este es un fragmento de texto preformateado.<br />
Este es un fragmento de texto preformateado. </pre>
<p><strong>Nota:</strong> Juega con el valor de la propiedad de relleno para ver cómo funciona.</p>
</body>
</html>

Esta notación abreviada puede tomar uno, dos, tres o cuatro valores separados por espacios en blanco.

Si se especifica un valor, se aplica a los cuatro lados.

Si se especifican dos valores, el primer valor se aplica al lado superior e inferior, y el segundo valor se aplica al lado derecho e izquierdo del cuadro del elemento.

Si se especifican tres valores, el primer valor se aplica a la parte superior, el segundo valor se aplica a los lados derecho e izquierdo y el último valor se aplica a la parte inferior.

Si se especifican cuatro valores, se aplican a la parte superior, derecha, inferior e izquierda del cuadro del elemento, respectivamente, en el orden especificado.

 

Efecto del relleno y el borde en el diseño

Al crear diseños de página web, agregar un relleno o un borde a los elementos a veces produce resultados inesperados, porque el relleno y el borde se agregan al ancho y alto del cuadro generado por el elemento, como aprendió en el capítulo del modelo de cuadro CSS.

Por ejemplo, si establece el ancho de un elemento

en 100% y también le aplica relleno o borde izquierdo derecho, aparecerá la barra de desplazamiento horizontal.

Para evitar que el relleno y el borde cambien el ancho y la altura del cuadro del elemento, puede usar la propiedad de tamaño de cuadro de CSS ( box-sizing ).
En el siguiente ejemplo, el ancho y el alto del cuadro <div> permanecerán sin cambios, sin embargo, su área de contenido disminuirá al aumentar el relleno o el borde.

Ejemplo
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<title>CSS que evita cambios en las dimensiones de la caja de elementos</title>
<style>
div {
width: 100%;
padding: 25px;
box-sizing: border-box;
background: violet;
}
</style>
</head>
<body>
<div>
<h1>Este es un titulo en caja DIV</h1>
</div>
<p><strong>Aviso</strong>, esta vez no hay barra de desplazamiento en la parte inferior de la ventana gráfica.</p>
</body>
</html>

 



Etiquetas: relleno css, relleno superior css, relleno texto css, area de relleno css, marjen y relleno css, relleno css definicion, texto sin relleno css, css relleno color, relleno de css
Relleno CSS - css.es

Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.


1
Online Editor
ONLINE EDITOR

news templates


COLOR PICKER

news templates
This tool makes it easy to create, adjust, and experiment with custom colors for the web.


HTML Templates
news templates
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.


CSS HTML Layout
news templates
Find here examples of creative and unique website layouts.


Free CSS HTML Menu
news templates
Find here examples of creative and unique website CSS HTML menu.