62909

[code]

    <div class='a'>
     <span class='b'>1</span>
     <span class='c'>いい天気</span>
    <div>
    
[/code]

このようなhtmlがあって

[code]

    1いい天気
    
[/code]

と表示されます。

これをCSSを編集することで

[code]

    1　いい天気
    
[/code]

のように間にスペースほどの間隔を空けることは可能ですか？  
(HTMLは編集できないようになっています。)


CC BY-SA 4.0
2020-02-09T12:58:19.153
62908
2020-02-09T14:40:25.670
36091
question
html css html5
CSSで空白を挿入する方法


可能です。

ひとつの方法として、 **`margin`** もしくは **`padding` プロパティ**で一文字分の余白を開ける、という方法があります。
`margin` と `padding` プロパティのどちらを用いるかは、その余白が要素の周囲に存在するものか、内部に存在するかで使い分けます。

`margin` プロパティを用いた例:  

[code]

    .cap {
      margin-left: 1cap;
    }
    
    .ch {
      margin-left: 1ch;
    }
    
    .em {
      margin-left: 1em;
    }
    
    .ex {
      margin-left: 1ex;
    }
    
    .ic {
      margin-left: 1ic;
    }
[/code]

[code]

    <h2>margin + cap</h2>
    <div class='a'>
      <span class='b'>1</span>
      <span class='c cap'>いい天気</span>
    </div>
    <h2>margin + ch</h2>
    <div class='a'>
      <span class='b'>1</span>
      <span class='c ch'>いい天気</span>
    </div>
    <h2>margin + em</h2>
    <div class='a'>
      <span class='b'>1</span>
      <span class='c em'>いい天気</span>
    </div>
    <h2>margin + ex</h2>
    <div class='a'>
      <span class='b'>1</span>
      <span class='c ex'>いい天気</span>
    </div>
    <h2>margin + ic</h2>
    <div class='a'>
      <span class='b'>1</span>
      <span class='c ic'>いい天気</span>
    </div>
[/code]

`padding` プロパティを用いた例:

[code]

    .cap {
      padding-left: 1cap;
    }
    
    .ch {
      padding-left: 1ch;
    }
    
    .em {
      padding-left: 1em;
    }
    
    .ex {
      padding-left: 1ex;
    }
    
    .ic {
      padding-left: 1ic;
    }
[/code]

[code]

    <h2>padding + cap</h2>
    <div class='a'>
      <span class='b'>1</span>
      <span class='c cap'>いい天気</span>
    </div>
    <h2>padding + ch</h2>
    <div class='a'>
      <span class='b'>1</span>
      <span class='c ch'>いい天気</span>
    </div>
    <h2>padding + em</h2>
    <div class='a'>
      <span class='b'>1</span>
      <span class='c em'>いい天気</span>
    </div>
    <h2>padding + ex</h2>
    <div class='a'>
      <span class='b'>1</span>
      <span class='c ex'>いい天気</span>
    </div>
    <h2>padding + ic</h2>
    <div class='a'>
      <span class='b'>1</span>
      <span class='c ic'>いい天気</span>
    </div>
[/code]

* * *

もうひとつの方法として、 `::before`, `::after` 疑似要素と `content` プロパティを組み合わせ、一文字分の
**余白に該当する文字で要素を置き換える** 方法があります。

[code]

    .nbsp::before {
      content: "\00a0";
    }
    
    .ideographic::before {
      content: "\3000";
    }
    
    .zero::before {
      content: "\200b";
    }
[/code]

[code]

    <h2>NO-BREAK SPACE</h2>
    <div class='a'>
     <span class='b'>1</span>
     <span class='c nbsp'>いい天気</span>
    </div>
    <h2>IDEOGRAPHIC SPACE </h2>
    <div class='a'>
     <span class='b'>1</span>
     <span class='c ideographic'>いい天気</span>
    </div>
    <h2>ZERO WIDTH SPACE</h2>
    <div class='a'>
     <span class='b'>1</span>
     <span class='c zero'>いい天気</span>
    </div>
[/code]


CC BY-SA 4.0
2020-02-09T14:40:25.670
62909
2020-02-09T14:40:25.670
32986
62908
answer