W3.CSS tiene muchas facilidades de clases para diseñar fácilmente elementos en HTML. Incluye varias clases de relleno sensibles para modificar la apariencia del elemento. Hay dos tipos de clases de relleno:
- Clases de relleno numeradas
- Clases de relleno de tamaño
Clases de relleno numeradas: estas clases agregan relleno superior e inferior al elemento de destino en función del número que se les asigna. La lista de clases que entran en esta categoría son las siguientes:
|
No Señor. |
Nombre de la clase |
Descripción |
|---|---|---|
|
1. |
w3-relleno-16 |
Esta clase agrega un relleno superior e inferior de 16 píxeles al elemento de destino. |
|
2. |
w3-relleno-24 |
Esta clase agrega un relleno superior e inferior de 24 px al elemento de destino. |
|
3. |
w3-relleno-32 |
Esta clase agrega un relleno superior e inferior de 32 px al elemento de destino. |
|
4. |
w3-relleno-48 |
Esta clase agrega un relleno superior e inferior de 48 px al elemento de destino. |
|
5. |
w3-relleno-64 |
Esta clase agrega un relleno superior e inferior de 64 px al elemento de destino. |
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href= "https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text color to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge"> GeeksForGeeks </h2> </div> <!-- Numbered Padding Classes in W3.CSS --> <div class="w3-container"> <!-- Numbered Padding Classes --> <h3 class="w3-text-blue"> Numbered Padding Classes: </h3> <!-- w3-padding-16 class --> <div class="w3-container w3-padding-16 w3-teal"> <p>Using w3-padding-16 class...</p> </div> <br> <!-- w3-padding-24 class --> <div class="w3-container w3-padding-24 w3-pink"> <p>Using w3-padding-24 class...</p> </div> <br> <!-- w3-padding-32 class --> <div class="w3-container w3-padding-32 w3-deep-orange"> <p>Using w3-padding-32 class...</p> </div> <br> <!-- w3-padding-48 class --> <div class="w3-container w3-padding-48 w3-purple"> <p>Using w3-padding-48 class...</p> </div> <br> <!-- w3-padding-64 class --> <div class="w3-container w3-padding-64 w3-blue"> <p>Using w3-padding-64 class...</p> </div> </div> </body> </html>
Producción:
Clases de relleno de tamaño: estas clases agregan relleno superior, inferior, izquierdo y derecho al elemento de destino en función de su tamaño. La lista de clases que entran en esta categoría son las siguientes:
|
No Señor. |
Nombre de la clase |
Descripción |
|---|---|---|
|
1. |
w3-relleno-pequeño |
Esta clase agrega 4px arriba, abajo y 8px izquierda, derecha de relleno al elemento. |
|
2. |
w3-relleno |
Esta clase agrega 8 px arriba, abajo y 16 px izquierdo, derecho de relleno al elemento. |
|
3. |
w3-relleno-grande |
Esta clase agrega 12 px arriba, abajo y 24 px izquierdo, derecho de relleno al elemento. |
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href= "https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text colour to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge"> GeeksForGeeks </h2> </div> <!-- Sized Padding Classes in W3.CSS --> <div class="w3-container"> <!-- Sized Padding Classes --> <h3 class="w3-text-blue"> Sized Padding Classes: </h3> <!-- w3-padding-small class --> <div class="w3-container w3-padding-small w3-teal"> <p>Using w3-padding-small class...</p> </div> <br> <!-- w3-padding class --> <div class="w3-container w3-padding w3-pink"> <p>Using w3-padding class...</p> </div> <br> <!-- w3-padding-large class --> <div class="w3-container w3-padding-large w3-deep-orange"> <p>Using w3-padding-large class...</p> </div> </div> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por aditya_taparia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA