[Vuetify] ml- , mb-

 

 

Vuetify 를 쓰다보면, class="mb-4" 이런 게 보인다.

이게 뭘까~?~?

어렵지 않다.

 

 

            <v-text-field
                v-model="userId"
                label="아이디"
                variant="outlined"
                density="compact"
                class="mb-4"
            />

 

이건 아이디 text-field 의 아래로 margin이 4단계 들어갔다는 뜻이다.

 

숫자는 Vuetify 기준 spacing scale (1은 약 4px)

 

 

 

그리고 이렇게 block속성이 들어가있으면 너비가 자동으로 100%가 된다.

 

Vuetify 컴포넌트는 기본적으로 block 요소라 가로정렬이 안되므로

margin: 0 auto; 을 줘야 중앙정렬 된다.