Margin-top/Margin-bottom 不工作

Question

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

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

我想实现两件事：

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

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

Margin-top/Margin-bottom 不工作

Margin-top/Margin-bottom not working

html

css

margin