What is the purpose of line-height, and what does white-space:nowrap do?

Question

what's line-height supposed to do since there is already an attribute called font-size?

And what does it mean when we specify something like:

white-space:nowrap;

Answer 1

The line-height property sets the distance between lines. If you make the value larger than the font-size then it will look like the lines are moving further away. Set it smaller, and the lines will start to overlap.

Answer 2

Line-height specifies the amount of space between lines. So to get "double spaced" type, you'd have line-height: 200%. Read More...

Answer 3

line-height: http://www.w3schools.com/css/pr_dim_line-height.asp

white-space: http://www.w3schools.com/css/pr_text_white-space.asp

Answer 4

It's used mostly for distance between lines in a paragraph.

Answer 5

The line-height property allows you to set the height of a line of text independently from the font size (works well for centering a single line of text vertically, etc.)

white-space:nowrap; will for lines of text not to wrap until a <br /> is encountered.

Answer 6

The Line-height property sets the distance between lines.

The white-space property sets how white-space inside an element is handled.

nowrap: The text will never wrap, it continues on the same line until a <br> tag is encountered

Answer 7

Another trick that can be used with the line-height property is to vertically align text inside an element. Take the following example:

<div class="container">
   <h1>Vertically align this!</h1>
</div>

.container {
   height: 5em;
   background-color: red;
   line-height: 5em;
}

   .container h1 {
      font-size: 3em;
   }

Answer 8

line-height will set the distance between two lines, either as an absolute or relative value. So line-height: 2em; would be double line spacing, etc. Whereas font-size sets the actual size of the font.

white-space tells the browser how to handle whitespace. "nowrap" will tell the browser to never wrap text, and instead to make the text continue on the line until a line break tag (<br/>) is encountered. You can also use "pre" to preserve the whitespace (same as using the <pre> HTML tag), or you can use "normal" to tell the browser to ignore whitespace (this is the default).

Answer 9

Line height is the height of the text. Fonts have a built-in, default line height. For single lines up text it will be the same as adjusting padding. But for multilines of text it controls the space between the lines of text-- which there is no other way to control.

White-space: nowrap tells the browser not to start a new line when it runs out of space horizontally. Instead, push the element as wide as it will go, and then simply overflow the dimensions of the box. You can achieve the same thing by replacing all spaces with &nbsp; entities.