Margin-top/Margin-bottom not working

Question

I'm working on a bigger web project and the following snippets are just extracts of two larger html/css documents.

But the problem remains: I'm not able to insert margin-top/bottom for my textboxes.

I want to achieve 2 things:

• Adding more rows with text boxes if needed - with a defined space between these rows.
• Use the same defined space after an auto break of a single row. This snippet is embedded many auto generated pages. So I don't know how many of these white boxes will be displayed. I want to achieve a fancier behavior after resizing the browser window too.

HTML/CSS - Minimal (not) working example:

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

---

What I want to achieve:

Answer 1

That's because span is an inline element, and margin-top/bottom doesn't work in inline elements, so make it a 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