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

このようなhtmlがあって

1いい天気

と表示されます。

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

1 いい天気

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

1 件の回答 1

3

可能です。

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

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

.cap {
  margin-left: 1cap;
}

.ch {
  margin-left: 1ch;
}

.em {
  margin-left: 1em;
}

.ex {
  margin-left: 1ex;
}

.ic {
  margin-left: 1ic;
}
<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>

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

.cap {
  padding-left: 1cap;
}

.ch {
  padding-left: 1ch;
}

.em {
  padding-left: 1em;
}

.ex {
  padding-left: 1ex;
}

.ic {
  padding-left: 1ic;
}
<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>


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

.nbsp::before {
  content: "\00a0";
}

.ideographic::before {
  content: "\3000";
}

.zero::before {
  content: "\200b";
}
<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>

1
  • なるほど。margin、paddingでこれほどの種類があるとは。。例もとても見やすかったです。ありがとうございました!
    – sapcal000
    Commented 2020年2月9日 17:24

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。