web-dev-qa-db-ja.com

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

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

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

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

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

さらに：

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

UPDATE

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

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

テーブルを使いたくない

CSSで最初と最後のスパンを自動的にターゲットにしたい

JavaScriptを使いたくない

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

csslayoutreceipt
88
Dan

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

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

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

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

206
thirtydot

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

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

UPDATE

素敵なCSS3ソリューションを次に示します（ jsFiddle ）：

span {
    margin: 0 10px;
}

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

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

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

25
Simone

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

span{
     Word-spacing:10px;
}

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

10
Ben

それはとても簡単です。

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

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

そして、クラス操作なしで完了しました。

8
Angie

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

span{
 margin-left:10px;
}
span:first-child{
 margin-left:0;
}
3
sandeep
span:not(:last-child) {
    margin-right: 10px;
}
3
Vladyslav Savchenko

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

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

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

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

3
reddtoric

コンテナ内に要素をラップし、 css grid 、 無料コース などの新しい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>
1
John Balvin Arias

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

横

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

垂直

span{
    margin-bottom: 10px;
}

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

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

<span>text</span> <span class="middle">text</span> <span>text</span>
0
Tim Joyce

または、マージンを設定して上書きする代わりに、次のコンボを使用してすぐに適切に設定できます。

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

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