Skip to main content

How to implement line-spacing in CSS

· 2 min read
Hyunmo Ahn
Hyunmo Ahn
Front End Engineer @ Line+

Introduction​

In CSS, line-height is used to adjust line spacing. However, in a project I worked on, there was a requirement to support line-spacing. This article explains how to implement line-spacing using CSS.

Line Spacing

Line Gap

Line Gap

Line Gap

Line Spacing (5px)

Line Height

Line Gap

Line Gap

Line Gap

Line Height (fontSize + 5px)

Cheat Sheet​

Unlike line-height, which applies padding both above and below the text, line-spacing applies padding only between lines. The difference here is that line-spacing does not add padding at the beginning and end of the text block.

You can implement line-spacing using margins.

const lineHeight = 20; // origin line-height
const lineSpacing = 10;
const margin = - (lineSpacing / 2);

const LineSpacingText = () => {
  return (
    <p style={{
      marginTop: `${margin}px`,
      marginBottom: `${margin}px`,
      lineHeight: `${lineHeight + lineSpacing}px`,
    }}>
      Hello, World!
    </p>
  );
};

Playground​

Line Spacing 0px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.

Line Spacing (0px)

Line Height (0px + fontSize)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.

Line Height (0px + fontSize)

Additional Story​

There isn't much more to say about the topic of line-spacing. If you have the idea of "Can it be implemented in CSS?", it's a difficulty level that can be sufficiently implemented.

The key to this idea is that while line-height applies padding both above and below, line-spacing applies padding only between lines. Therefore, even in the case of line-height, the spacing between lines is the same as the line-spacing padding, and the difference is the presence or absence of padding on the first and last lines. To bridge this difference, you use margins to reduce the value by line-spacing / 2.

In general web development, if such a line-spacing requirement comes up, it is better to somehow persuade in another direction or propose an alternative. In my case, although it was on the web, I had to create a design tool that perfectly matched a screen developed native, and I had to satisfy the special specification of line-spacing, so I used this method. It is not recommended to use this method simply to meet design requirements. Nevertheless, I hope this article helps developers who need to meet similar requirements.

Code Playground​

line-spacing
import { useState } from 'react';

export default function App() {
  const [lineSpacing, setLineSpacing] = useState(0);

  return (
    <>
      <h3>
        Line Spacing:{' '}
        <input type="text" value={lineSpacing} onChange={(e) => setLineSpacing(e.target.value)} />
        px
      </h3>
      <LineSpacingPlayground lineSpacing={Number(lineSpacing)} />
    </>
  );
}

export const LineSpacingPlayground = ({ lineSpacing }) => {
  const paddingGap = lineSpacing / 2;

  return (
    <div>
      <p
        style={{
          width: '200px',
          fontSize: '26px',
          lineHeight: `${lineSpacing + 26}px`,
          marginTop: `-${paddingGap}px`,
          marginBottom: `-${paddingGap}px`,
        }}
      >
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero.
        Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
      </p>
    </div>
  );
};
Open on CodeSandboxOpen Sandbox