Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de sitios web, aplicaciones y correos electrónicos receptivos sorprendentes que parecen sorprendentes y pueden ser accesibles para cualquier dispositivo. En este artículo, discutiremos las clases auxiliares de margen de utilidades de creación de prototipos en Foundation CSS.
En Foundation CSS, Prototyping Utilities Margin Helpers se utilizan para crear espacios alrededor de los elementos utilizando varias clases de márgenes.
Foundation CSS Prototyping Utilities Margin Helpers clases:
- margin-[n]: esta clase se utiliza para dar margen al elemento en las 4 direcciones.
- margin-top-[n]: esta clase se usa para dar el margen superior del elemento.
- margin-bottom-[n]: esta clase se usa para dar el margen inferior del elemento.
- margin-left-[n]: esta clase se utiliza para dar el margen izquierdo del elemento.
- margin-right-[n]: esta clase se utiliza para dar el margen derecho del elemento.
- margin-horizontal-[n]: esta clase se utiliza para dar margen en la dirección horizontal del elemento.
- margin-vertical-[n]: esta clase se utiliza para dar margen en la dirección vertical del elemento.
Nota: Aquí [n] es un número y puede ser 0, 1, 2, 3. Son unidades relativas con respecto a 8px, significa 0 = 0px, 1= 8px, 2 = 16px y 3 = 24px.
Sintaxis:
<div class="Margin Helpers class">
..............
</div>
Ejemplo 1: A continuación, se muestra el ejemplo que ilustra el uso de Prototyping Utilities Margin Helpers utilizando las clases margin-[n](0, 1, 2, 3) .
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Prototyping Utilities Margin Helpers</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css" crossorigin="anonymous"> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css" crossorigin="anonymous"> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-rtl.min.css" crossorigin="anonymous"> </head> <body style="margin-inline: 10rem;"> <center> <h2>GeeksforGeeks</h2> <h3>Prototyping Utilities Margin Helpers</h3> <div class="callout clearfix danger"> <div class="margin-0 callout"> 0 margin all around </div> </div> <div class="callout clearfix"> <div class="margin-1 callout"> 8px margin all around </div> </div> <div class="callout clearfix"> <div class="margin-2 callout"> 16px margin all around </div> </div> <div class="callout clearfix"> <div class="margin-3 callout"> 24px margin all around </div> </div> </center> </body> </html>
Producción:
Foundation CSS Prototyping Utilities Margin Helpers
Ejemplo 2: a continuación se muestra el ejemplo que ilustra el uso de los auxiliares de margen de Prototyping Utilities mediante las clases margin-top-[n](0, 1, 2, 3) .
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Prototyping Utilities Margin Helpers</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css" crossorigin="anonymous"> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css" crossorigin="anonymous"> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-rtl.min.css" crossorigin="anonymous"> </head> <body style="margin-inline: 10rem;"> <center> <h2>GeeksforGeeks</h2> <h3>Prototyping Utilities Margin Helpers</h3> <div class="callout clearfix danger"> <div class="margin-top-0 callout"> 0 margin-top all around </div> </div> <div class="callout clearfix"> <div class="margin-top-1 callout"> 8px margin-top all around </div> </div> <div class="callout clearfix"> <div class="margin-top-2 callout"> 16px margin-top all around </div> </div> <div class="callout clearfix"> <div class="margin-top-3 callout"> 24px margin-top all around </div> </div> </center> </body> </html>
Producción:
Foundation CSS Prototyping Utilities Margin Helpers
Ejemplo 3: A continuación, se muestra el ejemplo que ilustra el uso de Prototyping Utilities Margin Helpers utilizando las clases margin-vertical-[n](0, 1, 2, 3) .
HTML
<!DOCTYPE html> <html> <head> <title>Foundation CSS Prototyping Utilities Margin Helpers</title> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-float.min.css" crossorigin="anonymous"> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-prototype.min.css" crossorigin="anonymous"> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation-rtl.min.css" crossorigin="anonymous"> </head> <body style="margin-inline: 10rem;"> <center> <h2>GeeksforGeeks</h2> <h3>Prototyping Utilities Margin Helpers</h3> <div class="callout clearfix danger"> <div class="margin-vertical-0 callout"> 0 margin-vertical vertically </div> </div> <div class="callout clearfix"> <div class="margin-vertical-1 callout"> 8px margin-vertical vertically </div> </div> <div class="callout clearfix"> <div class="margin-vertical-2 callout"> 16px margin-vertical vertically </div> </div> <div class="callout clearfix"> <div class="margin-vertical-3 callout"> 24px margin-vertical vertically </div> </div> </center> </body> </html>
Producción:
Foundation CSS Prototyping Utilities Margin Helpers
Referencia: https://get.foundation/sites/docs/prototyping-utilities.html#margin-helpers
Publicación traducida automáticamente
Artículo escrito por singhtripti y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA