How to Code Line Spacing in CSS
In CSS, line spacing is set using the line height declaration. The space between lines in a Web page element containing text is partly dictated by the font size and partly by the line height. Using a CSS, or Cascading Style Sheet, file linked to your Web page, you can tailor the line height within any section of text. Setting line spacing properties in CSS is not difficult, so can be achieved by anyone, even those just starting to learn Web design.
Other People Are Reading
Instructions
-
-
1
Create your HTML Web page. Open a new file in a text editor and enter the following sample code, saving the file with ".html" extension:
<html>
<head>
<link rel="stylesheet" type="text/css" href="linestyle.css" />
</head>
<body>
<p class="height1">Line height 1</p>
<p class="height2">Line height 2</p>
<p class="height3">Line height 3</p>
</body>
</html>
The page contains three paragraph elements to demonstrate the line height properties. The link in the page head section refers to a separate CSS file.
-
2
Create your CSS file. The name of the CSS file must match the "href" attribute in the page head. Open a new file in a text editor and save it "linestyle.css" to match the HTML link. Enter the following code:
body {
font-size:small;}
p.height1 {
background:#FFFFCC;
line-height:2;}
This code sets the line height using a number that will be multiplied by the font size for the element in question. The background color is set so that you can see at a glance how your CSS rules are making the page elements appear.
-
-
3
Add CSS code to define line height using a percentage value. Enter the following code:
p.height2 {
background:#CCFFCC;
line-height:150%;}
This rule is again relative to the current font size, dictating that the line height should be 150% of the font size. Any percentage can be used, whether it is more or less than the size occupied according to the font size.
-
4
Add CSS code using a fixed value for line height. Enter the following code:
p.height3 {
background:#CCFFFF;
line-height:20px;}
This syntax uses a set number of pixels as the line height, which is mostly appropriate in cases where the font size has also been specified using a fixed value.
-
5
Save your CSS and HTML files. Upload them to your Web server and browse to the page to test it. Look at the differences in how your paragraphs appear, using the background colors as an indicator. Experiment with your code by changing the line height settings and testing the page again until you arrive at an appearance you're happy with.
-
1
Tips & Warnings
Using background colors is a useful practice while you're developing Web page designs, but you can easily delete the code once your design is complete.
Relative heights and font sizes can vary in appearance between browsers, so test your pages thoroughly.
References
Resources
- Photo Credit Hemera Technologies/AbleStock.com/Getty Images
