Si queremos agregar relleno en el documento HTML usando CSS interno, entonces debemos seguir los pasos que se detallan a continuación. Siguiendo estos sencillos pasos, podemos agregar fácilmente el relleno.
Paso 1: En primer lugar, tenemos que escribir el código HTML en cualquier editor de texto o abrir el archivo HTML existente en el editor de texto en el que queremos agregar el relleno.
Add the Padding in Html Hello User!... You are at JavaTpoint Site... The text on which we want to add padding.
Paso 2: Ahora, tenemos que colocar el cursor en la etiqueta head justo después de la etiqueta title del documento HTML y luego definir el etiqueta como se muestra en el siguiente bloque.
Add the Padding in Html
Paso 3: Ahora, tenemos que definir la propiedad de relleno en ese selector de identificación que se especifica justo antes del texto al que queremos agregar relleno.
A continuación se detallan las cinco propiedades diferentes desde las cuales podemos aplicar el relleno en cada lado:
i. Relleno izquierdo:
Si queremos aplicar solo relleno izquierdo a un elemento, entonces tenemos que usar solo relleno-izquierda propiedad en el selector de identificación. Y luego tenemos que establecer solo un valor para la propiedad como se muestra en el siguiente ejemplo:
Add the left Padding in Html div { border: 3px solid blue; padding-left: 75px; background-color: yellow; } Hello User!... You are at JavaTpoint Site... The text on which we add the 75pixel left padding. Pruébalo ahora El resultado del código anterior que utiliza la propiedad padding-left se muestra en la siguiente captura de pantalla:
ii. Relleno derecho:
Si queremos aplicar solo el relleno derecho a un elemento, entonces tenemos que usar solo relleno-derecha propiedad en el selector de identificación. Y luego tenemos que establecer solo un valor para la propiedad como se muestra en el siguiente ejemplo:
aws redes sociales
Add the right Padding in Html div { border: 3px solid blue; padding-right: 250px; background-color: yellow; } Hello User!... You are at JavaTpoint Site... The text on which we add the 250pixel right padding. Pruébalo ahora El resultado del código anterior que utiliza la propiedad padding-right se muestra en la siguiente captura de pantalla:
III. Acolchado superior:
Si queremos aplicar solo el relleno superior a un elemento, entonces tenemos que usar solo acolchado superior propiedad en el selector de identificación. Y luego tenemos que establecer solo un valor para la propiedad como se muestra en el siguiente ejemplo:
Add the Top Padding in Html div { border: 3px solid orange; padding-top: 25px; background-color: green; } Hello User!... You are at JavaTpoint Site... The text on which we add the 25pixel top padding. Pruébalo ahora El resultado del código anterior que utiliza la propiedad padding-top se muestra en la siguiente captura de pantalla:
IV. Fondo acolchado:
Si queremos aplicar solo relleno inferior a un elemento, entonces tenemos que usar solo fondo acolchado propiedad en el selector de identificación. Y luego tenemos que establecer solo un valor para la propiedad como se muestra en el siguiente ejemplo:
Add the Bottom Padding in Html div { border: 3px solid orange; padding-bottom: 250px; background-color: green; } Hello User!... You are at JavaTpoint Site... The text on which we add the 250pixel bottom padding. Pruébalo ahora El resultado del código anterior que utiliza la propiedad padding-bottom se muestra en la siguiente captura de pantalla:
v. Relleno:
Si queremos aplicar el relleno diferente a los cuatro lados (arriba, abajo, izquierda, derecha), entonces tenemos que especificar los cuatro valores en la propiedad de relleno.
padding: 10px 50px 75px 200px;
Si especificamos los dos valores, entonces el editor HTML aplica el primer relleno en la parte superior e inferior y el segundo relleno a la izquierda y a la derecha.
padding: 100px 50px;
Si especificamos solo el valor en el atributo de relleno, entonces el editor HTML aplicará el mismo relleno a los cuatro lados.
padding: 100px;
Ejemplos de propiedad de relleno:
Ejemplo 1: El siguiente ejemplo utiliza un valor en la propiedad padding para establecer el mismo relleno en los cuatro lados.
Set one value to apply same padding div { border: 3px solid gray; padding: 100px; background-color: orange; } Hello User!... You are at JavaTpoint Site... The text on which we set the 100pixel padding to all the four side. Pruébalo ahora El resultado del ejemplo 1 se muestra en la siguiente captura de pantalla:
Ejemplo 2: El siguiente ejemplo utiliza dos valores en el relleno propiedad para establecer el mismo relleno en los lados opuestos.
Specify two value to apply same padding on opposite sides div { border: 3px solid black; padding: 100px 50px; background-color: gray; } Hello User!... You are at JavaTpoint Site... This is a text on which we set the 100 pixel padding to top and bottom and 50 pixels to left and right side. Pruébalo ahora El resultado del ejemplo 2 se muestra en la siguiente captura de pantalla:
indio rekha
Ejemplo 3: El siguiente ejemplo utiliza cuatro valores en la propiedad padding para establecer el relleno diferente en los cuatro lados.
Specify four value to apply different padding on opposite sides div { border: 3px solid blue; padding: 10px 50px 75px 200px; background-color: red; } Hello User!... You are at JavaTpoint Site... This is a text on which we set the 10 pixel padding to top, 50 pixel padding to right, 75 pixel padding to bottom and 200 pixels padding to left side. Pruébalo ahora El resultado del ejemplo 3 se muestra en la siguiente captura de pantalla:
