Question

我正在使用vue，并且编写了一个简单的代码。

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

// index.css

.span{
  margin-top: 3px;
}

我想在输入和跨度之间放置空格。
但是，这个最高边距是行不通的。我怎么解决这个问题？非常感谢您阅读。

Answer 1

以您的跨度为块，以便应用边距

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

Answer 2

我将您的代码复制到了codeandbox.io中的Vue游乐场，并将输入放置在跨度上方，从您所写的内容来看，这似乎是您的默认状态，现在我给输入下方的跨度留出了3px的空白像这样，那里有it in this example

似乎可以正常运行，因为它应该是跨度，它与输入之间的顶部距离顶部有3个像素。

<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>

如果您有其他预期的行为，请与我们分享，以便我们进一步提供帮助。

Answer 3

您的问题确实是因为span是一个内联元素。内联元素可能会有一些布局限制，例如添加您提到的y轴边距。

您可以在此处了解更多信息：Official Doc

这就是为什么当您从inline更改其显示属性时它起作用的原因。

如何在输入和跨度之间使用边距顶部

3 个答案: