Aquí, vamos a aprender sobre la relleno en CSS (Cascading Style Sheet) , la forma de definir y aplicar rellenos sobre un objeto usando CSS?
La propiedad acolchado establece el espacio relleno en todos los lados de un elemento . El área de relleno es el espacio entre el contenido del elemento y su frontera. Los valores negativos no se les permite .
Sintaxis:
element_name
{
padding: length|initial|inherit;
}
Relleno taquigrafía
Para añadir acolchado a cada lado individualmente (utilizando padding-top , padding-left , etc) puede escribir como taquigrafía, como a continuación:
(valores Cuatro) Ejemplo:
<!DOCTYPE html>
<head>
<style>
.myDiv {
padding: 25px 50px 75px 100px;
background-color: #006969;
color: #ffffff;
width: 300px;
}
</style>
</head>
<html>
<body>
<p class="myDiv">
This site is specially designed to provide help to students,
working professionals and job seekers. We are fully dedicated to make each
tutorial very simple to learn and understand. This site is not created for business purpose,
but for spreading education about programming languages and to help the concerned learners
out who are enthusiastic to learn new technologies.</p>
</body>
</html>
salida
Aquí el relleno se hace es todas las direcciones con valor diferente en cada dirección.
(valores de tres) Ejemplo:
.myDiv
{
padding: 25px 50px 75px;
}
Ejemplo (dos valores):
.myDiv
{
padding: 25px 50px;
}
Ejemplo (un valor):
.myDiv {
padding: 25px;
}
Aquí el acolchado se realiza en los cuatro direcciones con mismo valor.
relleno en un lado determinado
Se puede especificar un lado de forma individual,
- padding-top
- padding-right
- padding-bottom
- padding-left
ejemplo:
<!DOCTYPE html>
<head>
<style>
.myDiv {
padding-right: 25px;
background-color: #006969;
color: #ffffff;
width: 300px;
}
</style>
</head>
<html>
<body>
<p class="myDiv">
This site is specially designed to provide help to students,
working professionals and job seekers. We are fully dedicated to make each
tutorial very simple to learn and understand. This site is not created for business purpose,
but for spreading education about programming languages and to help the concerned learners
out who are enthusiastic to learn new technologies.</p>
</body>
</html>
salida
el código anterior se sumaría un acolchado de 25 píxeles a la derecha del párrafo.