Help with spacing rows

[VerumLudens]

This is my current code:

<q-page padding class="row items-center">
<div class="col-12">

    <div class="row justify-center">

      <div class="col-6">
        <q-input class="q-ma-sm" dark v-model="text" label="Username or Email" />
        <q-input class="q-ma-sm" dark v-model="text" type = "password" label="Password" />
        <q-btn class="q-ma-sm" color = "secondary" label="Log In" />
      </div>

    </div>
    <q-space></q-space>
    <hr>

    <div class="row justify-center">

      <div class="col-6">

        <div class="row justify-center">

          <div class="col-12">
            <q-input class="q-ma-sm" dark v-model="text" label="Display Name" />
            <q-btn class="q-ma-sm" color = "secondary" label="Create Game" />
          </div>

        </div>

        

        <div class="row justify-center">

          <div class="col-12">

            <div class="row">
              <q-btn class="q-ma-sm" color = "secondary" label="Join Using ID" />
              <q-btn class="q-ma-sm" color = "secondary" label="Join Random" />
            </div>
            
          </div>

        </div>

      </div>

    </div>

  </div>
</q-page>

I tried using q-gutter but it doesn’t seem to be working. Is there a quasar way to do this or is my only option to override the CSS and manually set a large margin?

Any help would be appreciated!

[chyde90]

• remove <q-space></q-space> because it does nothing in your case (it is only for horizontal gaps, I think)
• add the class q-gutter-y-xl to the div in line 2

Explanation:
That div contains three elements (two divs and the <hr>) which you want to space out. Whenever you want to add equal spacing between all elements, using a q-gutter class on the container does the trick (except when working with cols, then it’s q-col-gutter, see https://quasar.dev/layout/grid/gutter).

(Alternatively, you could manually add margins to your rows or the separator, for example q-my-xl on the <hr> or the divs, but the gutter method is better)

Also, consider replacing <hr> with <q-separator />.