[Vuejs]-How to use margin top between input and span

I copied your code to a Vue playground in codesandbox.io and I positioned the input above the span, from what you wrote it seems this is the default state you are in and now I gave 3px margin to the span below the input like so, and there you have it in this example

It seems to work as it is supposed to be the span has 3 pixels space from the top between itself and the input.

<template>
  <div class="container">
    <input>
    <span class="span-text">Hi</span>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
}
span {
  margin-top: 3px;
}
</style>

If you have another expected behavior please share so we can help further.

Your problem is really because the span is an inline element.
And an inline element could have some layout limitations, like adding the y-axis margin that you’ve mentioned.

You can read more about this here: https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elements

That’s why it works when you change its display property from inline.