Line-height and line-spacing


#1


What is the difference between line-height and line-spacing


#2

In typing, line-spacing was how many lines of empty space (minus one) were between two lines of typed text. Single-spaced meant no line between, double-spaced meant one line between (two carriage returns).

line-height is the CSS property meant to address this typographical norm. It is possible to have an empty line between paragraphs since they have default styles that afford a 1em margin top and bottom. That margin does not apply to lines of the paragraph that wrap. The paragraph itself is single-spaced. line-height permits simulation of double-spacing in normal flow.

<html>
<head>
<title>line-height as line spacing</title>
<style>
span {
  display: block;
  line-height: 2em;
}
</style>
</head>
<body>
<div>
<span>The</span>
<span>quick</span>
<span>brown</span>
<span>fox</span>
<span>jumps</span>
<span>over</span>
<span>the</span>
<span>lazy</span>
<span>dog</span>
</div>
</body>
</html>


#3

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.