How to Adjust Line Spacing & Letter Spacing in CSS ?

How to Change Line Spacing in CSS?

Last Updated : 23 Nov, 2024

The line-height property in CSS is used to adjust line spacing between lines of text.

Syntax

line-height: value;

Example 1: In this example, we will increase the line height using the CSS line-height property.

HTML

<h3>Paragraph with Default Line Spacing</h3>
<p>
    HTML stands for HyperText Markup Language.
    It is the standard language used to create
    and design web pages on the internet. It
    was introduced by Tim Berners-Lee in 1991
    at CERN as a simple markup language.
</p>

<h3>Paragraph with Given Line Spacing</h3>
<p style="line-height: 2;">
    HTML stands for HyperText Markup Language.
    It is the standard language used to create
    and design web pages on the internet. It
    was introduced by Tim Berners-Lee in 1991
    at CERN as a simple markup language.
</p>

Output

line-spacing

Example 2: In this example, we will decrease the line height using CSS line-height property.

HTML

<h3>Paragraph with Default Line Spacing</h3>
<p>
    HTML stands for HyperText Markup Language.
    It is the standard language used to create
    and design web pages on the internet. It
    was introduced by Tim Berners-Lee in 1991
    at CERN as a simple markup language.
</p>

<h3>Paragraph with Given Line Spacing</h3>
<p style="line-height: 75%;">
    HTML stands for HyperText Markup Language.
    It is the standard language used to create
    and design web pages on the internet. It
    was introduced by Tim Berners-Lee in 1991
    at CERN as a simple markup language.
</p>

Output

line-spacing-2

How to Adjust Line Spacing & Letter Spacing in CSS ?

P

ppatelkap

Improve

Article Tags :

Similar Reads

Change Line Spacing in MS Word

Line Spacing refers to the amount of space between any two lines in the Word Document. The default size of Line Spacing is 1.08 in MS Word. However, we can add custom line spaces to different lines, paragraphs in our Word Document according to our requirements and ensure quite good readability of ou

How to Change Font Style in CSS?

Font style is an important element that enhances the readability of the text. CSS provides several properties to change the text appearance and font style. The font style property allows you to define how the text should appear normal, italic, or oblique.Table of ContentDifferent Methods to Change F

How to Adjust Line Spacing & Letter Spacing in CSS ?

Adjusting line spacing and letter spacing in CSS enhances readability and aesthetics of text on web pages. Line spacing, controlled by line-height, sets space between text lines, while letter spacing, controlled by letter-spacing, adjusts space between characters, ensuring a visually balanced layout

How To Add Line Break in CSS?

CSS provides flexible options to add or manage line breaks in your content. Here are some effective techniques:1. Using the white-space PropertyThe white-space property allows controlling how text wraps and respects line breaks within an element.HTML<html> <head> <style> .break { w

How to apply inline CSS ?

In this article we will learn how to apply inline CSS, Inline CSS contains the CSS property in the body section attached to the element is known as inline CSS. This kind of style is specified within an HTML tag using the style attribute. It is used to apply a unique style to a single HTML element. S

How to Change Font Size using CSS?

The CSS font-size property is used to change the font size of text. CSS font-size PropertyThe font-size property in CSS sets the size of the text of HTML elements. Values can be in pixels, percentages, em, rem etc.Syntaxfont-size: value;Example: We can use various font-size units like - em, smaller,

How to Change a Span to Look Like a Pre with CSS?

To make a <span> look like a <pre> element with CSS, you need to mimic the behavior of whitespace and styling associated with <pre>.1. Using Inline CSS Inline CSS is a styling method for HTML pages using the style attribute of an HTML element. Using Inline CSS is not considered a g

How to Style Links in CSS ?

Styling links in CSS is one of the fundamentals in web design that helps in creating an interactive and pleasant user experience through navigation. Links are core components for web pages, and using CSS, you can easily come up with the kind of look you want in terms of the overall appearance of the

How to Change the Space Between Words in CSS?

Changing the space between words in CSS enhances the readability of your text and can improve the overall aesthetics of your web pages. The word-spacing property allows you to control the spacing between words in an element. We will be going to discuss the approaches that can be used to Change the S

How to fix Spacing Classes in Bootstrap?

Bootstrap 5 provides a comprehensive set of spacing utilities that can be used to control the spacing between elements. These utilities cover various spacing properties, including margin and padding that can be applied to different sides of an element (top, right, bottom, left, and all sides). Below