代码之家 › 专栏 › 技术社区 › Dean Schulze

如何在跨度中的元素之间放置填充,或者为什么css填充在跨度中不起作用?

vue.js css html

Dean Schulze · 技术社区 · 2 年前

很抱歉标题太长,所以我不接受第二条作为标题。

我有一个Vuejs 3组件,带有一个输入文本框和一个搜索按钮。我想在文本框和按钮之间留出一些空间。很简单,对吧?而不是css。以下是代码:

.headerelement {
  padding-right: 50px;
  background-color: cadetblue;
}

<span style="padding-right: 20px; background-color: lightblue">
  <input type="text" placeholder="City?" v-model="this.$store.state.city" class="headerelement">
  <button id="search" @click="getGeocodeForLocation" style="padding-left: 10px;">
    <img src="../assets/search.svg" width="24" height="24" alt="search"/>
  </button>
</span>

我补充说 padding-right 到文本框,然后 padding-left 在搜索按钮的左侧,但两者都不起作用:

这个 右边距 上 <span...> 确实有效,但不适用于 <跨度> .

这是Vuejs 3中的病理学还是某种缺陷?

谢谢

1 回复 | 直到 2 年前

Yong 2 年前

你想要的是 margin-right 不 padding-right . 衬料清除内容周围的区域。虽然边缘清除边界以外的区域。你可以把它看作是填充物,是边框内的空间,边距是边框外的空间。添加 右边距 你的输入会给它更多的内部空间,而不是外部空间。更多关于CSS盒模型的信息 here .

.headerelement {
  margin-right: 50px;
  background-color: cadetblue;
}

<span style="padding-right: 20px; background-color: lightblue">
  <input type="text" placeholder="City?" v-model="this.$store.state.city" class="headerelement">
  <button id="search" @click="getGeocodeForLocation" style="padding-left: 10px;">
    <img src="../assets/search.svg" width="24" height="24" alt="search"/>
  </button>
</span>