Tachyons Layout Spacing se utiliza para especificar el espacio entre elementos. Su sitio web se verá bien cuando use espacios entre los elementos. Principalmente hay dos tipos de espaciado:
- relleno: se utiliza para crear espacio alrededor del contenido de un elemento, dentro de los bordes definidos.
- margin : se utiliza para crear espacio alrededor de los elementos, fuera de los bordes definidos.
Sintaxis:
<element-name class="class-name">...</element-name>
Clases de espaciado de diseño de taquiones:
Desde todos lados:
- pa1 – pa7: este atributo se utiliza para proporcionar relleno desde todos los lados con el valor de 1 a 7.
- ma1 – ma7: este atributo se utiliza para proporcionar un margen de todos los lados con el valor de 1 a 7.
Desde arriba:
- pt0 – pt7: este atributo se utiliza para proporcionar relleno desde los lados superiores con un valor de 0 a 7.
- mt0 – mt7: este atributo se utiliza para proporcionar un margen desde los lados superiores con un valor de 0 a 7.
Desde la parte inferior:
- pb0 – pb7: este atributo se usa para proporcionar relleno desde los lados inferiores con un valor de 0 a 7.
- mb0 – mb7: este atributo se utiliza para proporcionar un margen desde los lados inferiores con el valor de 0 a 7.
Desde la izquierda:
- pl0 – pl7: este atributo se utiliza para proporcionar relleno desde los lados izquierdos con un valor de 0 a 7.
- ml0 – ml7: este atributo se utiliza para proporcionar un margen desde los lados izquierdos con un valor de 0 a 7.
Desde la derecha:
- pr0 – pr7: este atributo se utiliza para proporcionar relleno desde los lados derechos con un valor de 0 a 7.
- mr0 – mr7: este atributo se utiliza para proporcionar un margen desde los lados derechos con el valor de 0 a 7.
Espaciado horizontal:
- ph0 – ph7: este atributo se utiliza para proporcionar relleno desde los lados horizontales con un valor de 0 a 7.
- mh0 – mh7: este atributo se utiliza para proporcionar un margen desde los lados horizontales con el valor de 0 a 7.
Espaciado vertical:
- pv0 – pv7: este atributo se utiliza para proporcionar relleno desde los lados verticales con un valor de 0 a 7.
- mv0 – mv7: este atributo se utiliza para proporcionar un margen desde los lados verticales con el valor de 0 a 7.
Ejemplo 1: en el siguiente ejemplo, hemos utilizado la clase » pa » que creará relleno desde todos los lados.
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
"https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" />
<style>
body {
text-align: center;
}
h1 {
color: green;
}
div {
border: 2px solid black;
background-color: lightgreen;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3>
<div class="pa1">GFG</div><br>
<div class="pa2">GFG</div><br>
<div class="pa3">GFG</div><br>
<div class="pa4">GFG</div><br>
<div class="pa5">GFG</div><br>
<div class="pa6">GFG</div><br>
</body>
</html>
Producción:
Ejemplo 2: en el siguiente ejemplo, hemos utilizado la clase » ma » que creará un margen desde todos los lados .
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet"
href=
"https://unpkg.com/tachyons@4.12.0/css/tachyons.min.css" />
<style>
body {
text-align: center;
}
h1 {
color: green;
}
div {
border: 2px solid black;
background-color: lightgreen;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3>
<div class="ma1">GFG</div><br>
<div class="ma2">GFG</div><br>
<div class="ma3">GFG</div><br>
<div class="ma4">GFG</div><br>
<div class="ma5">GFG</div><br>
<div class="ma6">GFG</div><br>
</body>
</html>
Producción:
Referencia: https://tachyons.io/docs/layout/spacing/
Publicación traducida automáticamente
Artículo escrito por krishna_97 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA