In HTML, the spacing between lines is controlled by the CSS property line-height. You can reduce the spacing by setting a smaller line-height value for the HTML elements you want to target.
Here’s a basic example of how to use line-height in your CSS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Line Spacing Example</title>
<style>
/* Set the line-height for all paragraphs in the document */
p {
line-height: 1.2; /* This is a unitless value, which is recommended because it scales with the font size */
}
/* You can also specify line-height in pixels, ems, percentages, etc. */
.tighter-spacing {
line-height: 18px; /* This will set a fixed line height */
}
</style>
</head>
<body>
<p>This paragraph has a default line height.</p>
<p class="tighter-spacing">This paragraph has a tighter line spacing due to a smaller line-height value.</p>
</body>
</html>
In the example above, the <p> elements have their line-height set to 1.2. This means that the spacing between lines will be 1.2 times the size of the text font. If you want the lines to be closer together, you could use a smaller value.
Unitless vs. Specific Measurement Values:
- Unitless: When you use a unitless value like
1.2, the line height is calculated relative to the font size. This is typically the recommended approach because it maintains the line spacing proportionally if the font size changes. - Pixels (px): This sets the line height to an exact pixel value. It does not scale with the font size, which can be less flexible in responsive designs.
- Ems (em): The line height is relative to the font size of the element itself.
- Percentages (%): The line height is relative to the font size of the element, similar to ems.
Remember to consider readability when adjusting line-height. Too little spacing can make text difficult to read, especially for larger blocks of text.