CSS Spacing
There are many ways to insert spaces within the text on a web page with the help of CSS. We will discuss them in this section.Specify space between characters
By using the property, letter-spacing, space between different letters can be set. In layman terms, this is known as kern. There are two values for this property namely, normal or some numerical value. Negative values can also be specified to make the characters appear closer. Example:The output is given below:<html> <head> <style type="text/css"> p.px {letter-spacing: 3px} p.cm {letter-spacing: 0.3cm} </style> </head> <body> <p class="px">This is letter spacing in px</p> <p class="cm">This is letter spacing in cm</p> </body> </html>
This is letter spacing in px
This is letter spacing in cm
Specify space between words
By using the property, word-spacing, space between different words can be set. There are two values for this property namely, normal or some numerical value. Negative values can also be specified to make the characters appear closer. Below is a simple example.The output is given below:<html> <head> <style type="text/css"> p.pos {word-spacing: 30px} p.neg {word-spacing: -0.5px} </style> </head> <body> <p class="pos">This text has more spacing between words</p> <p class="neg">This text has less spacing between words</p> </body> </html>
This text has more spacing between words
This text has less spacing between words
Specify space between lines
The distance between the lines can be set by using the property line-height. The value can be normal; a number which will be multiplied with the current font-size to set the distance between the lines; set fixed length between lines; or as a percent of the current font size. Below is an example.The output of the above code is shown below:<html> <head> <style type="text/css"> p.perc {line-height: 150%} p.smallpx {line-height: 20px} p.bigpx {line-height: 60px} p.num {line-height: 1} </style> </head> <body> <p> This is a normal paragraph. To demonstrate the function of the property, line-height, there have to be multiple lines. It will help us to understand how to specify space between lines. </p> <p class="perc"> This is a paragraph which has bigger line-height. The value is specified as a percentage. Since, the percentage value is higher, the space between the lines is also high. </p> <p class="smallpx"> This paragraph has line-height specified as a number. The number is specifed in pixel units. The value is just 20 pixels which is quite small. </p> <p class="bigpx"> This paragraph also has line-height as a number but the value is large. The value of the property, line-height is 60 pixels. </p> <p class="num"> This paragraph has single number as a value for the property, line-height. The value is just 1. Let's see how this paragraph will look like. </body> </html>
This is a normal paragraph. To demonstrate the function of the property, line-height, there have to be multiple lines. It will help us to understand how to specify space between lines.
This is a paragraph which has bigger line-height. The value is specified as a percentage. Since, the percentage value is higher, the space between the lines is also high.
This paragraph has line-height specified as a number. The number is specifed in pixel units. The value is just 20 pixels which is quite small.
This paragraph also has line-height as a number but the value is large. The value of the property, line-height is 60 pixels.
This paragraph has single number as a value for the property, line-height. The value is just 1. Let's see how this paragraph will look like.
Specify white space
The white space within an element is specified by using white-space property. Let's see an example.Example:
Output:<html> <head> <style type="text/css"> p.pre {white-space: pre} div.nowrap {white-space: nowrap} p.none {white-space: none} </style> </head> <body> <p class="pre">This command will preserve the white space in the text.</p> <div class="nowrap">This command will not wrap the text. Scroll bars will appear and it will continue in a single line until it encounters a break tag.</div> <p class="none">White space will be ignored in this paragraph.</p> </body> </html>
This command will preserve the white space in the text.
This command will not wrap the text. Scroll bars will appear and it will continue in a single line until it encounters a break tag.White space will be ignored in this paragraph.