GDY
GDY

Reputation: 2961

Make whitespace bigger with CSS

I have a font where the whitespaces are pretty small. I would like to make them bigger via CSS (instead of using multiple spaces for more room).

Is it possible to make whitespace bigger via CSS? Any other solutions if not?

Upvotes: 1

Views: 2221

Answers (2)

technophyle
technophyle

Reputation: 9149

word-spacing is probably what you're looking for.

Example from w3schools.com:

.a {
  word-spacing: normal;
}

.b {
  word-spacing: 30px;
}

.c {
  word-spacing: 1cm;
}
<h1>The word-spacing Property</h1>

<h2>word-spacing: normal:</h2>
<p class="a">This is some text. This is some text.</p>

<h2>word-spacing: 30px:</h2>
<p class="b">This is some text. This is some text.</p>

<h2>word-spacing: 1cm:</h2>
<p class="c">This is some text. This is some text.</p>

Upvotes: 4

connexo
connexo

Reputation: 56773

You have two CSS properties that affect white-space:

  • letter-spacing controls the white-space between each character;
  • word-spacing controls the white-space between words.

.word-spacing-10 {word-spacing: 10px}
.letter-spacing-3 {letter-spacing: 3px}
<p class="word-spacing-10">The quick brown fox jumps over the lazy dog.</p>
<p class="letter-spacing-3">The quick brown fox jumps over the lazy dog.</p>

Note that CSS has no way to affect the display characteristics of specific characters (like the space character e.g.).

Upvotes: 2

Related Questions