Relleno CSS
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.
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:
- padding-top,
- padding-right,
- padding-bottom
- padding-left
Las propiedades de relleno se pueden especificar utilizando los siguientes valores:
- length - especifica un relleno en px, pt, cm, etc.
- % - especifica un relleno en% del ancho del elemento contenedor
- inherit - especifica que el relleno debe heredarse del elemento padre
<!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>
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:
- padding-top
- padding-right
- padding-bottom
- padding-left
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
<!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
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.
<!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
This tool makes it easy to create, adjust, and experiment with custom colors for the web.
Magnews2 is a modern and creative free magazine and news website template that will help you kick off your online project in style.
Find here examples of creative and unique website layouts.
Find here examples of creative and unique website CSS HTML menu.