Spaces Between Words and Elements in CSS3
Mastering CSS3 – Part 7
Forward: In this part of the series, we see how to preserve spaces between words and html elements using CSS.
By: Chrysanthus Date Published: 25 Jul 2012
Introduction
Note: If you cannot see any text or if you think anything is missing (missing code, missing image, broken link, etc.) just contact me at forchatrans@yahoo.com.
HTML Way of handling Spaces
When creating an html document, if you type more than one space (pressing the spacebar key repeatedly) between words or elements, the browser will reduce the spaces to one. It is possible with CSS to preserve these spaces. All you do is that you use the following in the declaration block of the element that has the spaces:
white-space:pre
This is the white-space property and one of its possible values is, “pre”, which means preserve.
Spaces Between Words
Read and try the following code, which results in large spaces between words:
<!DOCTYPE HTML>
<html>
<head>
<title>Spaces</title>
</head>
<body>
<p style="white-space:pre">One two three</p>
</body>
</html>
Spaces between Elements
The above same technique can be applied to preserve spaces between elements. Read and try the following code, where the elements are input text elements.
<!DOCTYPE HTML>
<html>
<head>
<title>Spaces</title>
</head>
<body>
<form method="post" action="http://somesite.com/script.exe">
<p style="white-space:pre"><label>First Name: <input type="text" name="fn"></label> <label>Middle Name: <input type="text" name="mn"></label> <label>Last Name: <input type="text" name="ln"></label></p>
</form>
</body>
</html>
The text alignment properties of Left Justify, Right Justify and Center Justify are not only applicable to texts in a containing element. They are also applicable to elements inside a containing element. So, after preserving spaces between elements in a containing element, you can left justify, right justify and center justify the elements together, in the containing element. Read and try the following code samples:
<!DOCTYPE HTML>
<html>
<head>
<title>Spaces</title>
</head>
<body>
<form method="post" action="http://somesite.com/script.exe">
<p style="white-space:pre; text-align:left"><label>First Name: <input type="text" name="fn"></label> <label>Middle Name: <input type="text" name="mn"></label> <label>Last Name: <input type="text" name="ln"></label></p>
</form>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Spaces</title>
</head>
<body>
<form method="post" action="http://somesite.com/script.exe">
<p style="white-space:pre; text-align:center"><label>First Name: <input type="text" name="fn"></label> <label>Middle Name: <input type="text" name="mn"></label> <label>Last Name: <input type="text" name="ln"></label></p>
</form>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<title>Spaces</title>
</head>
<body>
<form method="post" action="http://somesite.com/script.exe">
<p style="white-space:pre; text-align:right"><label>First Name: <input type="text" name="fn"></label> <label>Middle Name: <input type="text" name="mn"></label> <label>Last Name: <input type="text" name="ln"></label></p>
</form>
</body>
</html>
What I have taught you in this tutorial can be applied to hyperlinks or buttons or other inline elements, in the same way that they have been applied to the input text controls.
Well, let us stop here and continue in the next part of the series.
Chrys
Related Links
Major in Website DesignWeb Development Course
HTML Course
CSS Course
ECMAScript Course
NEXT