Espaciado rehegua

Margen ha acolchado

Oñeasigna respuesta-friendly margintérã paddingvalores peteĩ elemento térã peteĩ subconjunto ijykére orekóva clase taquigrafía. Oike ipype pytyvõ umi mbaꞌekuaarã peteĩteĩva rehegua, opaite mbaꞌekuaarã ha mbaꞌekuaarã vertical ha horizontal rehegua. Umi mbo’esyry oñemopu’ã peteĩ mapa Sass por defecto guive ohóva .25remguive 3rem.

Oipurúvo CSS Grid ñemohendarã módulo? Epensamína reipuru hag̃ua pe utilidad gap rehegua .

Notación rehegua

Umi utilidad espaciado rehegua ojeporúva opaite punto de ruptura-pe, guive xsguive xxl, ndorekói ipypekuéra abreviatura punto de ruptura rehegua. Péva ojehu umi mboꞌepy ojeporúgui guive min-width: 0ha yvate gotyo, ha upéicha ndojejokói peteĩ ñeporandu medio rehegua rehe. Umi punto de ruptura hembýva katu oike peteĩ abreviatura punto de ruptura rehegua.

Umi mboꞌepy oñembohéra ojeporúvo formato {property}{sides}-{size}, xs, , , ha {property}{sides}-{breakpoint}-{size}rehegua ha .smmdlgxlxxl

Oĩhápe propiedad peteĩva:

• m- umi clase omoĩvape g̃uarãmargin
• p- umi clase omoĩvape g̃uarãpadding

Moõpa umi lado oĩ peteĩva:

• t- umi mbo’esyry omoĩvape g̃uarã margin-toptérãpadding-top
• b- umi mbo’esyry omoĩvape g̃uarã margin-bottomtérãpadding-bottom
• s- (ñepyrũ) umi mboꞌepy omoĩva margin-lefttérã padding-leftLTR-pe g̃uarã, margin-righttérã padding-rightRTL-pe
• e- (opa) umi clase omoĩvape g̃uarã margin-righttérã padding-rightLTR-pe, margin-lefttérã padding-leftRTL-pe
• x- umi mbo’esyry omoĩva mokõivévape g̃uarã *-leftha*-right
• y- umi mbo’esyry omoĩva mokõivévape g̃uarã *-topha*-bottom
• blank - umi mboꞌepy omoĩva peteĩ margintérã paddingopaite 4 elemento ykére g̃uarã

Oĩháme tuichakue peteĩva:

• 0- umi mbo’esyry omboykévape g̃uarã margintérã paddingomoĩvo chupe0
• 1- (por defecto) umi clase omoĩvape g̃uarã pe margintérã paddingto$spacer * .25
• 2- (por defecto) umi clase omoĩvape g̃uarã pe margintérã paddingto$spacer * .5
• 3- (por defecto) umi clase omoĩvape g̃uarã pe margintérã paddingto$spacer
• 4- (por defecto) umi clase omoĩvape g̃uarã pe margintérã paddingto$spacer * 1.5
• 5- (por defecto) umi clase omoĩvape g̃uarã pe margintérã paddingto$spacer * 3
• auto- umi clase omoĩvape g̃uarã pe marginto auto

(Ikatu emoĩve tuichakue emoĩvo jeikepyre $spacersSass mapa variable-pe).

Tembiecharã

Ko’ápe oĩ techapyrã representativo ko’ã clase rehegua:

.mt-0 {
  margin-top: 0 !important;
}

.ms-1 {
  margin-left: ($spacer * .25) !important;
}

.px-2 {
  padding-left: ($spacer * .5) !important;
  padding-right: ($spacer * .5) !important;
}

.p-3 {
  padding: $spacer !important;
}

Centrado horizontal rehegua

Avei, Bootstrap oguereko avei peteĩ .mx-automboꞌepy oñecentra hag̃ua horizontalmente contenido nivel bloque ancho fijo rehegua —heꞌiséva, contenido oguerekóva display: blockha peteĩ widthconjunto—omohenda rupi umi margen horizontal -pe auto.

<div class="mx-auto" style="width: 200px;">
  Centered element
</div>

Margen negativo rehegua

CSS-pe, marginumi mbaꞌekuaarã ikatu oipuru umi mbaꞌekuaarã vai ( paddingndaikatúi). Ko’ã margen negativo oñembogue por defecto , ha katu ikatu oñemboguata Sass-pe oñemboheko rupi $enable-negative-margins: true.

Pe ñe’ẽjoaju haimete ojogua umi utilidad margen positivo por defecto, ha katu oñembojoapývo npe tuichakue ojejeruréva mboyve. Ko'ápe oĩ peteĩ clase techapyrã ha'éva contrario .mt-1:

.mt-n1 {
  margin-top: -0.25rem !important;
}

Jeka

Eipuru jave display: grid, ikatu eipuru umi gaputilidad oĩva contenedor cuadrícula túvape. Kóva ikatu oñeñongatu oñembojoapyvaꞌerãha umi utilidad margen rehegua umi mbaꞌe red rehegua peteĩteĩvape (peteĩ display: gridmbaꞌeryru membykuéra). Umi purupyrã Gap rehegua ombohovái por defecto, ha oñemboheko ore API purupyrã rupive, oñemopyendáva $spacersSass mapa-pe.

<div class="d-grid gap-3">
  <div class="p-2 bg-light border">Grid item 1</div>
  <div class="p-2 bg-light border">Grid item 2</div>
  <div class="p-2 bg-light border">Grid item 3</div>
</div>

Pytyvõ oike opción ombohováiva opaite Bootstrap punto de ruptura cuadrícula rehegua, avei seis tamaño $spacersmapa-gui ( 0– 5). Ndaipóri .gap-autoclase utilidad ha'eháicha efectivamente ojoajúva .gap-0.

Sass rehegua

Mapakuéra

Umi utilidad espaciado rehegua ojedeclara Sass mapa rupive ha upéi oñegenera ñande utilidad API ndive.

$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
);

$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null);

API de Utilidades rehegua

Umi utilidad espaciado rehegua ojedeclara ñande utilidad API-pe ary scss/_utilities.scss. Eikuaa mba’éichapa eipurukuaa API utilidad rehegua.

    "margin": (
      responsive: true,
      property: margin,
      class: m,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-x": (
      responsive: true,
      property: margin-right margin-left,
      class: mx,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-y": (
      responsive: true,
      property: margin-top margin-bottom,
      class: my,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-top": (
      responsive: true,
      property: margin-top,
      class: mt,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-end": (
      responsive: true,
      property: margin-right,
      class: me,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-bottom": (
      responsive: true,
      property: margin-bottom,
      class: mb,
      values: map-merge($spacers, (auto: auto))
    ),
    "margin-start": (
      responsive: true,
      property: margin-left,
      class: ms,
      values: map-merge($spacers, (auto: auto))
    ),
    // Negative margin utilities
    "negative-margin": (
      responsive: true,
      property: margin,
      class: m,
      values: $negative-spacers
    ),
    "negative-margin-x": (
      responsive: true,
      property: margin-right margin-left,
      class: mx,
      values: $negative-spacers
    ),
    "negative-margin-y": (
      responsive: true,
      property: margin-top margin-bottom,
      class: my,
      values: $negative-spacers
    ),
    "negative-margin-top": (
      responsive: true,
      property: margin-top,
      class: mt,
      values: $negative-spacers
    ),
    "negative-margin-end": (
      responsive: true,
      property: margin-right,
      class: me,
      values: $negative-spacers
    ),
    "negative-margin-bottom": (
      responsive: true,
      property: margin-bottom,
      class: mb,
      values: $negative-spacers
    ),
    "negative-margin-start": (
      responsive: true,
      property: margin-left,
      class: ms,
      values: $negative-spacers
    ),
    // Padding utilities
    "padding": (
      responsive: true,
      property: padding,
      class: p,
      values: $spacers
    ),
    "padding-x": (
      responsive: true,
      property: padding-right padding-left,
      class: px,
      values: $spacers
    ),
    "padding-y": (
      responsive: true,
      property: padding-top padding-bottom,
      class: py,
      values: $spacers
    ),
    "padding-top": (
      responsive: true,
      property: padding-top,
      class: pt,
      values: $spacers
    ),
    "padding-end": (
      responsive: true,
      property: padding-right,
      class: pe,
      values: $spacers
    ),
    "padding-bottom": (
      responsive: true,
      property: padding-bottom,
      class: pb,
      values: $spacers
    ),
    "padding-start": (
      responsive: true,
      property: padding-left,
      class: ps,
      values: $spacers
    ),