Relleno en CSS

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 .

Padding in CSS - 4

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

Padding in CSS - 5

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

Padding in CSS - 6

el código anterior se sumaría un acolchado de 25 píxeles a la derecha del párrafo.


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *