Question

我们假设我有这样的HTML：

<div id='main'>
  <select name='foo'>
    <option>A</option>
    <option>B</option>
  </select>
  <br>
  <select name='baa'>
    <option>C</option>
    <option>D</option>
  </select>
  <br>
</div>

我正在寻找一个CSS规则，在这些元素之上创建一个空格，就像我有一个margin-top: 10px;在main div中的每个元素上。我该怎么做？搜索我找到了这个解决方案：

border-collapse: separate;
border-spacing: 0 1em;

但它没有像我描述的那样奏效。

Answer 1

使用css universal selector似乎可以解决问题：

#main *{ /* see the asterisk in the selector here, that's what you're after*/
  margin-top: 10px;
}

<div id='main'>
  <select name='foo'>
    <option>A</option>
    <option>B</option>
  </select>
  <br>
  <select name='baa'>
    <option>C</option>
    <option>D</option>
  </select>
  <br>
</div>

Answer 2

选择一个类，然后在课程中添加一个边距。

像这样：

.center {
  text-align: center;
  color: red;
  margin-top: 10px
}

<div id='main'>
  <select name='foo' class="center">
    <option>A</option>
    <option>B</option>
  </select>
  <br>
  <select name='baa' class="center">
    <option>C</option>
    <option>D</option>
  </select>
  <br>
</div>

如何在div中的所有元素顶部之间放置空格？

2 个答案: