マージントップ/マージンボトムが動作しない

Question

私はより大きなウェブプロジェクトに取り組んでいます。次のスニペットは、2つの大きなhtml/cssドキュメントの抜粋です。

しかし、問題は残ります： テキストボックスにmargin-top/bottomを挿入できません。これらの行の間に形成された空間で - 必要な場合は、テキストボックスで複数の行を追加する

• ：

  は、私は2つのことを達成したいです。

• 1行の自動ブレーク後に同じ定義済みのスペースを使用します。このスニペットは、多くの自動生成ページに組み込まれています。だから私はこれらの白いボックスのどれが表示されるのか分かりません。私はブラウザウィンドウのサイズを変更した後でも、より魅力的な動作を実現したい。

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にしてください。

インラインブロック

この値はインラインレベルブロックコンテナを生成するための要素を引き起こします。インラインブロックの内部はブロックボックスとしてフォーマットされ、要素自体は原子レベルのインラインレベルのボックスとしてフォーマットされます。

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