Vuetify의 Spacing 헬퍼로 Margin, Padding을 간단 조정(~v-container를 채워 표시하고 싶다~편)

Vuetify의 필수・편리 컴퍼넌트인 v-container 입니다만, 보통으로 표시하면 다른 요소와의 사이에 좋은 느낌의 여백이 들어갑니다.

샘플

    <v-app-bar color="blue lighten-3">app-bar</v-app-bar>
    <v-container>
      <v-row>
        <v-col cols="3">
          <v-card height="100" color="amber lighten-4"> v-card </v-card>
        </v-col>
      </v-row>
    </v-container>

↓



보기 쉬운 여백이 마음대로 들어 주기 때문에 고맙습니다만, 이하와 같이 밀착해 표시시키고 싶은 경우도 있습니다.


Margin이나 Padding이나 꼬리를 잡는 것으로 밀착시키는데, Vuetify에는 이 Margin과 Padding을 간단하게 설정할 수 있는 헬퍼 클래스가 존재합니다.

Spacing 도우미

Spacing 도우미 을 사용하면 각 요소의 여백을 쉽게 조정할 수 있습니다.

기법은 간단하고 {Margin/Paddingのどちらか}{どの方向か}-{どれだけの幅か} 의 순서로 쓰는 것 뿐입니다. 예를 들어 위쪽 방향의 Margin과 Padding을 0으로 만들고 싶다면 mt-0 pt-0 하고 싶다면 mt-2 ml-1 pb-3 라는 상태입니다.

위의 v-container로 시도

v-container는 기본적으로 Margin과 Padding이 작동하므로 0으로 설정합니다.

    <v-app-bar color="blue lighten-3">app-bar</v-app-bar>
    <v-container mt-0 pt-0>
      <v-row>
        <v-col cols="3">
          <v-card height="100" color="amber lighten-4"> v-card </v-card>
        </v-col>
      </v-row>
    </v-container>

저기, Margin, Padding 모두 제로로 했는데 왠지 미묘하게 틈이 비어있네요.

아마도, v-app-bar , v-container 모두 시각 효과를 위한 그림자의 키와까지 1개의 컴퍼넌트가 되어 있기 때문에, 확실히 보면 틈이 비어 있는 것처럼 보일까 생각합니다.

시험에 이 컴퍼넌트의 경계 부분을 한계까지 2치화했는데, 틈이 있는 것처럼 보였던 부분도, 실은 그림자로 묻혀 있는 것을 알았습니다.


"틈새처럼 보이지만 실은 그림자로 묻혀있어"라고 말해도 어쩔 수 없기 때문에, 이것을 메우기 위해 네거티브 마진을 사용합니다.
네거티브의 이름대로 Margin에 부의 수를 주는 이미지로, 요점은 다른 요소에 겹치도록 표시할 수 있습니다.

    <v-app-bar color="blue lighten-3">app-bar</v-app-bar>
    <v-container mt-n2 pt-0>
      <v-row>
        <v-col cols="3">
          <v-card height="100" color="amber lighten-4"> v-card </v-card>
        </v-col>
      </v-row>
    </v-container>

v-container 를 v-app-bar 의 그림자에 겹치도록 v-container 의 위쪽 방향으로 부정적인 2(8px)를 설정했습니다.

이제 무사히 밀착하여 (있는 것처럼) 표시시킬 수있었습니다.

참고

CSS Spacing helpers — Vuetify.js