#White space above template, debugging leads to it not existing as an element

10 messages · Page 1 of 1 (latest)

rare coral
#

Hey all, I am having a bit of a weird problem. I have a whitespace above my <header> that will not go away, or when I check with devtools it does not exist as padding or spacing or anything.
I have an App.vue with <NuxtPage/> and this is my index.vue:

<template class="temp">
  <section class="front-section">
    <header class="font-Inter">
      <nav class="container flex items-center py-4 mt-4 sm:mt-12 pr-4 pl-4">
        <div class="py-1">
          <img src="/img/logo-bookmark.svg" alt="" />
        </div>
        <ul class="hidden sm:flex flex-1 justify-end items-center gap-12 text-white uppercase text-xs">
          <li class="cursor-pointer">Features</li>
          <li class="cursor-pointer">Pricing</li>
          <li class="cursor-pointer">Contact</li>
          <button type="button"
            class="text-white bg-ga-light-blue dark:text-black rounded-md px-7 py-3 uppercase">Login</button>
        </ul>
        <div class="flex sm:hidden flex-1 justify-end">
          <!-- <Icon name="material-symbols:menu" color="white"></Icon> -->
          <p>Menu Icon</p>
        </div>
      </nav>
    </header>

  </section> 
</template>

<script setup lang="ts">

</script>

I am using tailwindcss nuxt plugin. Is this a common occurrence? I saw this post: https://stackoverflow.com/questions/58583789/how-to-remove-white-space-over-the-bootstrap-navigation-bar-in-vue-js
But the answers dont seem to help me.

It seems the body is having an invisible margin but my devtools says its 0 on margin.

Okay it looks like if I add a <p> tag before header in front-section it actually will remove the whitespace? I am so confused

image.png
left eagle
#

Hey there! Could you create a small stackblitz to check out? Hard from the code only to debug.

#

Thanks!

rare coral
#

Hey Fabian! Thank you so much for replying, but I literally just found the problem.

I have a background for front-section but my 'nav' which has a mt-4(margin top) makes the whole front-section have a margin on top. That I am confused about a bit.

left eagle
#

Yeah margins can have very wierd behaviour 😄

rare coral
#

I'll just use more padding which seems to work correctly haha

#

ty 🙂

#

How do i put my question on solved?

#

Oh it is already on solved, ty

left eagle
#

Right Click on the post listing -> Edit Tags