<div class='a'>
<span class='b'>1</span>
<span class='c'>いい天気</span>
<div>
このようなhtmlがあって
1いい天気
と表示されます。
これをCSSを編集することで
1 いい天気
のように間にスペースほどの間隔を空けることは可能ですか?
(HTMLは編集できないようになっています。)
可能です。
ひとつの方法として、 margin
もしくは padding
プロパティで一文字分の余白を開ける、という方法があります。 margin
と padding
プロパティのどちらを用いるかは、その余白が要素の周囲に存在するものか、内部に存在するかで使い分けます。
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>