How to use margin top between input and span

Question

I am using vue and I wrote a simple code.

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

// index.css

.span{
  margin-top: 3px;
}

I want to put the space between input and span.
But this margin-top doesn't work. How can I solve this problem? Thank you so much for reading.

As @BhojendraRauniyar mentioned, span is referred to in CSS by just span and not .span (as all other HTML tags, such as div, h1, etc.). That being said, why use a span and not a div? a div is by default in display: block and will react to margin-top better — ArielGro, Sep 23 '19 at 07:40

score 3 · Accepted Answer · edited Oct 06 '19 at 16:05

3

Use your span as a block so the margin will be applied

    span{
      display: block;
      margin-top: 3px;
    }

edited Oct 06 '19 at 16:05

ArielGro

795
1
11
24

answered Sep 21 '19 at 14:28

mgnrfk

97
7

Hi.. A code snippet would make a much better answer. – ArielGro Sep 23 '19 at 07:41
Awesome!! Only one correction - span and not .span (I already edited it) – ArielGro Sep 23 '19 at 12:51

score 0 · Answer 2 · answered Sep 21 '19 at 14:35

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.

score 0 · Answer 3 · answered Sep 21 '19 at 14:58

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.

How to use margin top between input and span

3 Answers3