W3.CSS tiene muchas facilidades de clases para diseñar fácilmente elementos en HTML. Incluye varias clases de margen de respuesta para la modificación de la apariencia del elemento. La lista de clases de margen es la siguiente:
|
No Señor. |
Nombre de la clase |
Descripción |
|---|---|---|
|
1. |
margen w3 |
Agrega 16px de margen a todos los lados del elemento en el que se usa. |
|
2. |
w3-margen-superior |
Agrega 16px de margen a la parte superior del elemento en el que se usa. |
|
3. |
w3-margen-derecho |
Agrega 16px de margen a la derecha del elemento en el que se usa. |
|
4. |
w3-margen-inferior |
Agrega 16px de margen en la parte inferior del elemento en el que se usa. |
|
5. |
w3-margen-izquierda |
Agrega 16px de margen a la izquierda del elemento en el que se usa. |
|
6. |
w3-sección |
Agrega 16px de margen a la parte superior e inferior del elemento en el que se usa. |
En W3.CSS, las siguientes clases, tal como se usan en el código, se usan para implementar los márgenes de la división.
HTML
<!DOCTYPE html> <html> <head> <!-- Title of the page --> <title>GeeksForGeeks</title> <!-- 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> <!-- Margin Classes in W3.CSS --> <div class="w3-container"> <!-- Margin Classes --> <h3 class="w3-text-blue">Margin Classes:</h3> <!-- w3-margin class --> <div class="w3-border"> <div class="w3-container w3-margin w3-teal"> <p>Using w3-margin class...</p> </div> </div> <br> <!-- w3-margin-top class --> <div class="w3-border"> <div class="w3-container w3-margin-top w3-teal"> <p>Using w3-margin-top class...</p> </div> </div> <br> <!-- w3-margin-right class --> <div class="w3-border"> <div class="w3-container w3-margin-right w3-teal"> <p>Using w3-margin-right class...</p> </div> </div> <br> <!-- w3-margin-bottom class --> <div class="w3-border"> <div class="w3-container w3-margin-bottom w3-teal"> <p>Using w3-margin-bottom class...</p> </div> </div> <br> <!-- w3-margin-left class --> <div class="w3-border"> <div class="w3-container w3-margin-left w3-teal"> <p>Using w3-margin-left class...</p> </div> </div> <br> <!-- w3-section class --> <div class="w3-border"> <div class="w3-container w3-section w3-teal"> <p>Using w3-section class...</p> </div> </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