CSSで空白を挿入する方法

投稿者: Anonymous
<div class='a'>
 <span class='b'>1</span>
 <span class='c'>いい天気</span>
<div>

このようなhtmlがあって

1いい天気

と表示されます。

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

1 いい天気

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

解決

可能です。

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

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

_x000D_

_x000D_

.cap {_x000D_
  margin-left: 1cap;_x000D_
}_x000D_
_x000D_
.ch {_x000D_
  margin-left: 1ch;_x000D_
}_x000D_
_x000D_
.em {_x000D_
  margin-left: 1em;_x000D_
}_x000D_
_x000D_
.ex {_x000D_
  margin-left: 1ex;_x000D_
}_x000D_
_x000D_
.ic {_x000D_
  margin-left: 1ic;_x000D_
}

_x000D_

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

_x000D_

_x000D_

_x000D_

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

_x000D_

_x000D_

.cap {_x000D_
  padding-left: 1cap;_x000D_
}_x000D_
_x000D_
.ch {_x000D_
  padding-left: 1ch;_x000D_
}_x000D_
_x000D_
.em {_x000D_
  padding-left: 1em;_x000D_
}_x000D_
_x000D_
.ex {_x000D_
  padding-left: 1ex;_x000D_
}_x000D_
_x000D_
.ic {_x000D_
  padding-left: 1ic;_x000D_
}

_x000D_

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

_x000D_

_x000D_

_x000D_


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

_x000D_

_x000D_

.nbsp::before {_x000D_
  content: "0a0";_x000D_
}_x000D_
_x000D_
.ideographic::before {_x000D_
  content: "3000";_x000D_
}_x000D_
_x000D_
.zero::before {_x000D_
  content: "200b";_x000D_
}

_x000D_

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

_x000D_

_x000D_

_x000D_

回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *