CSS | Propiedad padding-right

El relleno es el espacio entre su contenido y su borde. La propiedad padding-right en CSS se usa para establecer el ancho del área de relleno a la derecha de un elemento.

Sintaxis: 

padding-right: length | percentage | initial | inherit;

Valores de propiedad: 
 

  • length: este modo se utiliza para especificar el tamaño del relleno como un valor fijo. El valor predeterminado es 0. Debe ser no negativo.
    Sintaxis: 
padding-right: length;
  • Ejemplo: 

html

<!DOCTYPE html>
<html>
    <head>
        <title>
            padding-right Property
        </title>
         
        <style>
            .geek {
                padding-right: 200px;
                color: white;
                background: green;
                width:50%;
                font-size:18px;
            }
        </style>
    </head>
     
    <body style = "text-align:center">
        <h1 style = "color: green;">
            GeeksforGeeks
        </h1>
         
        <h2>
            padding-right Property
        </h2>
         
        <!-- padding-right property used here -->
        <p class = "geek">
            This paragraph has a padding-right: 200px;
        </p>
 
    </body>
</html>                   
  • Producción: 
     

paddingright

  • porcentaje: este modo se utiliza para establecer el relleno derecho en porcentaje del ancho del elemento. Debe ser no negativo.
    Sintaxis:
padding-right: percentage;
  • Ejemplo:

html

<!DOCTYPE html>
<html>
    <head>
        <title>
            padding-right Property
        </title>
        <style>
            .geek {
                padding-right: 40%;
                color: white;
                background: green;
                width:50%;
                font-size:18px;
            }
        </style>
    </head>
     
    <body style = "text-align:center">
        <h1 style = "color: green;">
            GeeksforGeeks
        </h1>
        <h2>
            padding-right Property
        </h2>
     
            <!-- padding-right property used here -->
        <p class = "geek">
            This paragraph has a padding-right: 40%;
        </p>
 
    </body>
</html>                   
  • Producción: 
     

paddingright

  • initial: esta propiedad se utiliza para establecer el valor predeterminado.
    Sintaxis: 
padding-right: initial;
  • Ejemplo: 

html

<!DOCTYPE html>
<html>
    <head>
        <title>
            padding-right Property
        </title>
         
        <style>
            .geek {
                padding-right: initial;
                color: white;
                background: green;
                width:70%;
                font-size:25px;
            }
        </style>
    </head>
     
    <body style = "text-align:center">
        <h1 style = "color: green;">
            GeeksforGeeks
        </h1>
         
        <h2>
            padding-right Property
        </h2>
         
        <!-- padding-right property used here -->
        <p class = "geek">
            This paragraph has a padding-right: initial;
        </p>
 
    </body>
</html>                   
  • Producción: 
     

Navegadores compatibles: los navegadores compatibles con la propiedad padding-right se enumeran a continuación: 

  • Google Chrome 1.0
  • Internet Explorer 4.0
  • Firefox 1.0
  • Ópera 3.5
  • Apple Safari 1.0

Publicación traducida automáticamente

Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

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