CSSのみを使用してHTML要素間にスペースを追加する

私はいくつかの同じHTML要素を次々に持っています：

<span>1</span>
<span>2</span>
<span>3</span>

CSSのみを使用して要素間にスペースを追加する最良の方法を探しています

[no space]  [1]  [space 10px]  [2]  [space 10px]  [3]  [no space]

さらに：

• 領収書のブラウザの互換性を書き留めてください

更新

はっきりしないようです。次のような追加のHTMLマークアップを使用したくない

<span></span>  <span></span>  <span class="last_span"></span>

テーブルを使いたくない

CSSによって最初と最後のスパンが自動的にターゲティングされるようにしたい

JavaScriptを使用したくない

オプションの要件：最後のスパンは親タグの最後の子にすることはできませんが、親タグの最後のスパンになります。スパンの間に他のタグはありません。

それを行う良い方法はこれです：

span + span {
    margin-left: 10px;
}

span前にaが付いているものすべてspan（spanつまり、最初のものを除くすべて）にはがありmargin-left: 10pxます。

同様の質問に対するより詳細な回答を次に示します。ハックなしの要素間のセパレーター

マージンまたはパディングを使用してください。

特定のケースでmargin:0 10pxは、2日にのみ使用できます<span>。

更新

これは素晴らしいCSS3ソリューションです（jsFiddle）：

span {
    margin: 0 10px;
}

span:first-of-type {
    margin-left: 0;
}

span:last-of-type {
    margin-right: 0;
}

以下のようなセレクタを使用して高度な要素の選択:nth-child()、:last-child、:first-of-type、などは、Internet Explorer 9以降でサポートされています。

これらのルールを親コンテナに追加します。

display: grid
grid-auto-flow: column
grid-column-gap: 10px

良いリファレンス：https : //cssreference.io/

ブラウザーの互換性：https : //gridbyexample.com/browsers/

とても簡単です。

コードの1行だけで、最初の要素を除外して要素をスタイルできます。

span ~ span {
padding-left: 10px;
}

クラスを操作することなく完了します。

spanインライン要素であるという事実を利用できます

span{
     word-spacing:10px;
}

ただし、このソリューションは、スパン内に複数の単語のテキストがある場合は機能しません。

span:not(:last-child) {
    margin-right: 10px;
}

次のように書くことができます：

span{
 margin-left:10px;
}
span:first-child{
 margin-left:0;
}

<span>インライン要素なので、ブロックレベルにせずに間隔を空けることはできません。これを試して

横型

span{
    margin-right: 10px;
    float: left;
}

垂直

span{
    margin-bottom: 10px;
}

すべてのブラウザと互換性があります。

要素をコンテナ内にラップし、CSSグリッド、 無料コースなどの新しいCSS3機能を使用grid-gap:valueして、特定の問題用に作成された機能を使用する必要があります

span{
  border:1px solid red;
}
.inRow{
  display:grid;
  grid-template-columns:repeat(auto-fill,auto);
  grid-gap:10px /*This add space between elements, only works on grid items*/
}
.inColumn{
  display:grid;
  grid-template-rows:repeat(auto-fill,auto);
  grid-gap:15px;
}

<div class="inrow">
  <span>1</span>
  <span>2</span>
  <span>3</span>
</div>
<div class="inColumn">
  <span>4</span>
  <span>5</span>
  <span>6</span>
</div>

または、マージンを設定してオーバーライドするのではなく、次のコンボですぐに適切に設定できます。

span:not(:first-of-type) {
    margin-left:  5px;
}

span:not(:last-of-type) {
    margin-right: 5px;
}

span.middle {
    margin: 0 10px 0 10px; /*top right bottom left */
}

<span>text</span> <span class="middle">text</span> <span>text</span>

さまざまなアイテムを揃えたい場合で、すべての辺に同じマージンを設定したい場合は、以下を使用できます。containerタイプに関係なく、を持つ各要素は、同じ周囲マージンを受け取ります。

.container {
  display: flex;
}
.container > * {
  margin: 5px;
}

項目を一列に整列させたいが、最初の要素がの左端に接してcontainerいて、他のすべての要素が等間隔になっている場合は、次のように使用できます。

.container {
  display: flex;
}
.container > :first-child {
  margin-right: 5px;
}
.container > *:not(:first-child) {
  margin: 5px;
}