html - 边距顶部/边距底部不起作用

Question

我正在处理一个更大的 Web 元素，以下片段只是两个更大的 html/css 文档的摘录。

但问题依旧:我无法为我的文本框插入 margin-top/bottom。

我想实现两件事:

• 如果需要，添加更多带有文本框的行 - 这些行之间有定义的空间。
• 在单行的自动中断后使用相同的定义空间。此代码段嵌入了许多自动生成的页面。所以我不知道会显示多少这些白框。我也想在调整浏览器窗口大小后实现更奇特的行为。

HTML/CSS - 最小(非)工作示例:

body {
  font-family: Gill Sans, Gill Sans MT, Calibri, sans-serif;
  background-color: #f0f0f0;
}
span.bigger {
  font-size: 1.5em;
  margin-right: 15px;
  /*not working*/
  margin-top: 225px;
  margin-bottom: 225px;
  background-color: white;
  padding: 5px;
}

<div id="content">
  <span class="bigger">Text-Text-Text</span>
  <span class="bigger">Text-Text-Text</span>
  <span class="bigger">Text-Text-Text</span>
  <span class="bigger">Text-Text-Text</span>
  <span class="bigger">Text-Text-Text</span>
  <span class="bigger">Text-Text-Text</span>
  <span class="bigger">Text-Text-Text</span>
  <span class="bigger">Text-Text-Text</span>
  <span class="bigger">Text-Text-Text</span>
  <span class="bigger">Text-Text-Text</span>
  <span class="bigger">Text-Text-Text</span>
  <span class="bigger">Text-Text-Text</span>
</div>
No margin

---

我想达到的目标:

Answer 1

那是因为span是一个内联元素，而margin-top/bottom在内联元素中不起作用，所以让它成为inline-level block container element .

inline-block

This value causes an element to generate an inline-level block container. The inside of an inline-block is formatted as a block box, and the element itself is formatted as an atomic inline-level box.

body {
  font-family: Gill Sans, Gill Sans MT, Calibri, sans-serif;
  background-color: #f0f0f0;
}
span.bigger {
  display: inline-block;
  font-size: 1.5em;
  margin:10px;
  background-color: white;
  padding: 5px;
}

<div id="content">
  <span class="bigger">Text-Text-Text</span>
  <span class="bigger">Text-Text-Text</span>
  <span class="bigger">Text-Text-Text</span>
  <span class="bigger">Text-Text-Text</span>
  <span class="bigger">Text-Text-Text</span>
  <span class="bigger">Text-Text-Text</span>
  <span class="bigger">Text-Text-Text</span>
  <span class="bigger">Text-Text-Text</span>
  <span class="bigger">Text-Text-Text</span>
  <span class="bigger">Text-Text-Text</span>
  <span class="bigger">Text-Text-Text</span>
  <span class="bigger">Text-Text-Text</span>
</div>
No margin