인프런 커뮤니티 질문&답변

 여백이 선생님 만큼 안떨어지는데 왜 그럴까요?

<template>
  <g-page class="q-pa-xl">
    <section class="q-mb-xl">
      <div class="text-h4">Headings</div>
      <q-separator class="q-my-md" />
      <p class="text-h1">Headline 1</p>
      <p class="text-h2">Headline 2</p>
      <p class="text-h3">Headline 3</p>
      <p class="text-h4">Headline 4</p>
      <p class="text-h6">Headline 5</p>
      <p class="text-h6">Headline 6</p>
      <p class="text-subtitle1">Subtitle 1</p>
      <p class="text-subtitle2">Subtitle 2</p>
      <p class="text-body1">
        Body 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur
        unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam
        dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.
      </p>
      <p class="text-body2">
        Body 2. Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate aliquid ad quas
        sunt voluptatum officia dolorum cumque, possimus nihil molestias sapiente necessitatibus
        dolor saepe inventore, soluta id accusantium voluptas beatae.
      </p>
      <p class="text-caption">Caption text</p>
      <p class="text-overline">Overline</p>
    </section>
    <section>
      <div class="text-h4">FontWeight</div>
      <q-separator class="q-my-md" />
      <p class="text-weight-thin">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </p>
      <p class="text-weight-light">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </p>
      <p class="text-weight-bold">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </p>
    </section>
    <section>
      <div class="text-h4">CSS Helper Classes</div>
      <q-separator class="q-my-md" />
      <p class="text-weight-thin text-right">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </p>
      <p class="text-weight-light text-center">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </p>
      <p class="text-weight-bold text-strike">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry.
      </p>
    </section>
  </g-page>
</template>

<script></script>
<script setup></script>

<style lang="scss" scoped></style>