MENU


Spacing

white-space
:normal: white spaces collapse. Text wraps. Default.
:nowrap: white spaces collapse. Text continues.
:pre-line: white spaces collapse. Text wraps.
:pre: white spaces are preserved. Text continues.
:pre-wrap: white spaces are preserved. Text wraps.

letter-spacing
:normal: no extra space. Default.
:-3px: removes 3px of space between characters.

line-height
:normal: normal line height. Default.
:3: 3 times the font height to the next line.
:3px: 3px between lines.
:50%:50% font height to the next line.

The following shows two different ways to vertically align text to the middle of a block element.


RESETRUNFULL
<!DOCTYPE html><html><head><style>
   body{
      display: table-cell;
      vertical-align: middle;
      text-align: center;
      width:100vw;
      height:100vh;
   }
</style></head>
<body>
   Welcome!
</body></html>

RESETRUNFULL
<!DOCTYPE html><html><head>
<style>
   body{
      line-height: 100vh;
      text-align: center;
      width:100vw;
      height:100vh;
   }
</style>
</head><body>
   Welcome!
</body></html>

word-spacing
:normal: normal space between words. Default.
:3px: leaves 3px between words.
:inherit: inherits the value from the parent element.

tab-size
:5: uses 8 spaces for the width of a tab character.
:50px: uses 50px for the width of a tab character.

text-indent
:15px: indents 15px at the start of the first line.
:10%: indents 10% parent's width at the first line.


RESETRUNFULL
<!DOCTYPE html><html><head>
<style>
   body{
      white-space: pre-wrap;
      letter-spacing: -2px;
      line-height:40px;
      word-spacing: 20px;
      tab-size:10;
   }
   p{
      text-indent: 20%;
   }
</style>
</head><body>The default tab size is 8 spaces. The default tab size is 8 spaces. The default tab size is 8 spaces.&#0009;The default tab size is 8 spaces.
<p>The default tab size is 8 spaces. The default tab size is 8 spaces. The default tab size is 8 spaces. The default tab size is 8 spaces. The default tab size is 8 spaces. The default tab size is 8 spaces. The default tab size is 8 spaces. The default tab size is 8 spaces. The default tab size is 8 spaces. The default tab size is 8 spaces. The default tab size is 8 spaces. The default tab size is 8 spaces. The default tab size is 8 spaces. The default tab size is 8 spaces. The default tab size is 8 spaces. The default tab size is 8 spaces. The default tab size is 8 spaces. The default tab size is 8 spaces. The default tab size is 8 spaces. The default tab size is 8 spaces. The default tab size is 8 spaces. The default tab size is 8 spaces. The default tab size is 8 spaces. The default tab size is 8 spaces. The default tab size is 8 spaces. The default tab size is 8 spaces. The default tab size is 8 spaces. The default tab size is 8 spaces. The default tab size is 8 spaces. The default tab size is 8 spaces. </p>
</body></html>