CSS | Propiedad padding-top – Barcelona Geeks

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

Sintaxis:

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

Valores de propiedad:

length: este modo se utiliza para especificar el tamaño del relleno como un valor fijo. El tamaño se puede establecer en forma de px, cm, etc. El valor predeterminado es 0. No debe ser negativo.

Sintaxis:

padding-top: length;

Ejemplo:

<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            padding-top Property 
        </title> 
          
        <style> 
            .geek { 
                padding-top: 100px; 
                width:50%; 
                font-size:18px; 
                border: 1px solid black;
            } 
        </style> 
    </head> 
      
    <body> 
        <h2> 
            padding-top Property 
        </h2> 
          
        <!-- padding property used here -->
        <p class = "geek"> 
            This paragraph has a padding-top: 100px; 
        </p> 
    </body> 
</html>                     

Producción:

porcentaje: este modo se utiliza para establecer el relleno superior en porcentaje del ancho del elemento. Debe ser no negativo.

Sintaxis:

padding-top: percentage (%)

Ejemplo:

<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            padding-top Property 
        </title> 
          
        <style> 
            .geek { 
                padding-top: 10%; 
                width:50%; 
                font-size:18px; 
                border: 1px solid black;
            } 
        </style> 
    </head> 
      
    <body> 
        <h2> 
            padding-top Property 
        </h2> 
          
        <!-- padding property used here -->
        <p class = "geek"> 
            This paragraph has a padding-top: 10%; 
        </p> 
    </body> 
</html>                     

Producción:

initial: se utiliza para establecer la propiedad padding-top en su valor predeterminado.

Sintaxis:

padding-top: initial;

Ejemplo:

<!DOCTYPE html> 
<html> 
    <head> 
        <title> 
            padding-top Property 
        </title> 
          
        <style> 
            .geek { 
                padding-top: initial; 
                width:50%; 
                font-size:18px; 
                border: 1px solid black;
            } 
        </style> 
    </head> 
      
    <body> 
        <h2> 
            padding-top Property 
        </h2> 
          
        <!-- padding property used here -->
        <p class = "geek"> 
            This paragraph has a padding-top: initial; 
        </p> 
    </body> 
</html>                     

Producción:

heredar: se utiliza para heredar la propiedad padding-top de su elemento principal.

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

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

Publicación traducida automáticamente

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

Deja una respuesta Cancelar la respuesta