Question

我希望跨度元素具有不同的边距。例如，margin-top: 25px应该用于第一个span元素，margin-top: 15px应该用于第二个元素：

    <div style="background: green">
       <span style="display: inline-block; margin-top: 25px;">1</span>
       <span style="display: inline-block; margin-top: 15px;">2</span>
    </div>

但是，第二个span具有margin-top: 25px。

是否可以为两个margin-top元素设置不同的span？

Answer 1

您需要输入vertical-align: top。默认情况下，inline-block个元素将下沉到其同级。

Answer 2

只是为了显示它们的确，我添加了一个边框并在容器上放了一个柔性显示器。这也取决于您在视觉上的需求。我添加了第二个示例，它在不更改边框包含的大小的情况下移动。

.thing {
  display: flex;
  background: green
}

.thing-span {
  display: inline-block;
  border: yellow 1px solid;
}

.thing-span.one {
  margin-top: 25px;
}

.thing-span.two {
  margin-top: 15px;
}

<div class="thing">
  <span class="thing-span one">1</span>
  <span class ="thing-span two">2</span>
</div>

另一种方式

.thing {
  
  background: green
}

.thing-span {
  display: inline-block;
  border: yellow 1px solid;
  vertical-align:top;
}

.thing-span.one {
  margin-top: 25px;
}

.thing-span.two {
  margin-top: 15px;
}

<div class="thing">
  <span class="thing-span one">1</span>
  <span class ="thing-span two">2</span>
</div>

如何为span元素设置不同的margin-top？

2 个答案: