Css no space between lines

Line height is set to 0, why is there space between lines?

Short form question: Why is there vertical space between the bottom lines, and not the upper ones? I don’t want the vertical space. TL;DR Same behavior in Firefox and Chrome, so not likely a bug, but clearly something I don’t understand. While I understand the font-size for .wrap3 is larger than the previous ones, the line-height is zero, and calculated that way according to the debugger. Also notice that although the text is 16pt, and its line-height calculates to 19.2pt, and that is very close to the font-size of wrap1. Further notice that .wrap2 uses a 40pt font. over twice as big, yet has no effect on the line spacing. But bigger than 40pt, and space appears. .wrap3 uses 60pt, which produces an obviously visible vertical space. but far less than 60pt. I’ve read about struts here, another similar issue is here. And there is loads of info and several techniques for eliminating the space between inline and inline-block elements, and I’ve successfully used them in circumstances where that was appropriate. Now, however, I’m facing the other case. where the space between inline elements is desired, to work in a fluid layout to provide space between elements. Although I have a
in the snippet, imagine far more than 4 items in the list, and varying sizes of browser windows or device screens. What I’m trying to do, is to vary the space between inline elements, which is a quarter of the .wrapN font size, to my advantage. Spacing these items apart with padding or margin would not allow both the last item on one line to reach the very right edge of the window and also have the first item on the next line reach the very left edge of the window, although a solution using padding or margin or something else would be OK, as long as both sides of the window can be reached under appropriate circumstances.

body < margin: 0; padding: 0; >.wrap1 < font-size: 20pt; line-height: 0; >.wrap2 < font-size: 40pt; line-height: 0; >.wrap3 < font-size: 60pt; line-height: 0; >.foo2 < display: inline-block; line-height: 0; font-size: 0; >.foo2 p < >.foo2 span

 
text1
 
2text
 
3biggertext
 
4text
 
 
text1
 
2text
 
3biggertext
 
4text
 
 
text1
 
2text
 
3biggertext
 
4text
 

2 Answers 2

If you want to remove the vertical space, change the vertical-align property to something other than the default value which is baseline ( vertical-align: baseline ).

When the value is set to baseline this vertical space is reserved for letters such as j, y, p, q.

body < margin: 0; padding: 0; >.wrap1 < font-size: 20pt; line-height: 0; >.wrap2 < font-size: 40pt; line-height: 0; >.wrap3 < font-size: 60pt; line-height: 0; >.foo2 < display: inline-block; line-height: 0; font-size: 0; vertical-align: top; >.foo2 p <> .foo2 span

 
 
text1 
 
 
2text 
 
 
 
3biggertext 
 
 
4text 
 
 
 
 
text1 
 
 
2text 
 
 
 
3biggertext 
 
 
4text 
 
 
 
 
text1 
 
 
2text 
 
 
 
3biggertext 
 
 
4text 
 
 

Источник

CSS Text Spacing

In this chapter you will learn about the following properties:

• text-indent
• letter-spacing
• line-height
• word-spacing
• white-space

Text Indentation

The text-indent property is used to specify the indentation of the first line of a text:

Example

Letter Spacing

The letter-spacing property is used to specify the space between the characters in a text.

The following example demonstrates how to increase or decrease the space between characters:

Example

Line Height

The line-height property is used to specify the space between lines:

Example

Word Spacing

The word-spacing property is used to specify the space between the words in a text.

The following example demonstrates how to increase or decrease the space between words:

Example

White Space

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

This example demonstrates how to disable text wrapping inside an element:

Example

The CSS Text Spacing Properties

Property	Description
letter-spacing	Specifies the space between characters in a text
line-height	Specifies the line height
text-indent	Specifies the indentation of the first line in a text-block
white-space	Specifies how to handle white-space inside an element
word-spacing	Specifies the space between words in a text

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

How to set the space between lines in a div without setting line height

I have a div containing elements with display set to inline-block. These contained elements have various heights. The resulting lines in the div have various heights, according to the heights of the elements in them. This is as I want it. But I want to add some space between the lines in the div. For example, elements in adjacent lines with background color set should have a visible gap between them. The common advice for a paragrpah is to set line-height, but this sets the same height for all lines in the div, which I don’t want. Is there a way to set a space between the lines without making all the lines the same height and without modifying the contained elements? In a simplified form the HTML content looks like this:

 
variable stuff
 
variable stuff
 
variable stuff
 
variable stuff
 .
 

Each inner div has different content: different height and width. I can style all the inner divs. Pragmatically, I have already done that and have a result I could live with. But I was surprised to see that CSS doesn’t have an obvious way to set line spacing (i.e. the space between lines, as opposed to the height of lines: I know about line-height but it is not, directly, line spacing and has the (undesired in this instance) effect of making all the lines the same height — even the lines where all the elements in the line have a low height). I am curious to know if there is a way to set line spacing as a parameter of the outer div, without setting the line height. I think of it as line spacing, but another way to think of it is top and bottom margin on each line in the outer div, rather than on the outer div as a whole, and without overriding the top and bottom margins of all the inner divs (which is what I have done for now) or making all the lines the same height (as line-height does). The only way I can think of to do it without overriding the margins of the inner divs, is by wrapping each in another div, simply to set a common margin. If I do it this way, the margins of the two divs don’t collapse, which I can live with. This works well enough in this case, where all the content is divs, but it wouldn’t work if I had mixed text and divs (i.e. text interspersed with divs), in which case I would be back to wishing I could find a way to specify line spacing.

Источник

Line height is set to 0, why is there space between lines?

Short form question: Why is there vertical space between the bottom lines, and not the upper ones? I don’t want the vertical space. TL;DR Same behavior in Firefox and Chrome, so not likely a bug, but clearly something I don’t understand. While I understand the font-size for .wrap3 is larger than the previous ones, the line-height is zero, and calculated that way according to the debugger. Also notice that although the text is 16pt, and its line-height calculates to 19.2pt, and that is very close to the font-size of wrap1. Further notice that .wrap2 uses a 40pt font. over twice as big, yet has no effect on the line spacing. But bigger than 40pt, and space appears. .wrap3 uses 60pt, which produces an obviously visible vertical space. but far less than 60pt. I’ve read about struts here, another similar issue is here. And there is loads of info and several techniques for eliminating the space between inline and inline-block elements, and I’ve successfully used them in circumstances where that was appropriate. Now, however, I’m facing the other case. where the space between inline elements is desired, to work in a fluid layout to provide space between elements. Although I have a
in the snippet, imagine far more than 4 items in the list, and varying sizes of browser windows or device screens. What I’m trying to do, is to vary the space between inline elements, which is a quarter of the .wrapN font size, to my advantage. Spacing these items apart with padding or margin would not allow both the last item on one line to reach the very right edge of the window and also have the first item on the next line reach the very left edge of the window, although a solution using padding or margin or something else would be OK, as long as both sides of the window can be reached under appropriate circumstances.

body < margin: 0; padding: 0; >.wrap1 < font-size: 20pt; line-height: 0; >.wrap2 < font-size: 40pt; line-height: 0; >.wrap3 < font-size: 60pt; line-height: 0; >.foo2 < display: inline-block; line-height: 0; font-size: 0; >.foo2 p < >.foo2 span

 
text1
 
2text
 
3biggertext
 
4text
 
 
text1
 
2text
 
3biggertext
 
4text
 
 
text1
 
2text
 
3biggertext
 
4text
 

2 Answers 2

If you want to remove the vertical space, change the vertical-align property to something other than the default value which is baseline ( vertical-align: baseline ).

When the value is set to baseline this vertical space is reserved for letters such as j, y, p, q.

body < margin: 0; padding: 0; >.wrap1 < font-size: 20pt; line-height: 0; >.wrap2 < font-size: 40pt; line-height: 0; >.wrap3 < font-size: 60pt; line-height: 0; >.foo2 < display: inline-block; line-height: 0; font-size: 0; vertical-align: top; >.foo2 p <> .foo2 span

 
 
text1 
 
 
2text 
 
 
 
3biggertext 
 
 
4text 
 
 
 
 
text1 
 
 
2text 
 
 
 
3biggertext 
 
 
4text 
 
 
 
 
text1 
 
 
2text 
 
 
 
3biggertext 
 
 
4text 
 
 

Источник

How to adjust the amount of space between two lines at each
in CSS?

Is there any way to adjust space between lines, but only where the
‘s appear? The output might look like this:

This is some text. This is some more text. This is yet some more text. 

• This is not the same as double-space, as long lines wrapping on the page would not appear with the extra space.

How can I adjust the amount of space between lines where
appears?

You could use line-height specifically on the br tag like here. Need to check if it works in all browsers.

I googled this using your exact title and the question shown as a possible duplicate came up as the first result.

2 Answers 2

It is possible to target a
tag with CSS but it will not be very cross-browser compatible and it just isn’t a very good idea because anyone looking at your code will assume you haven’t got the faintest idea what your doing because there are certainly more appropriate methods to achieve your goal.

The
on it’s own has no default height. If you have an HTML page with nothing but a
you have an empty page. The style on the
tag will be

The page will have this styling

height: auto; line-height: normal; max-height: none; min-height: 0px; 

The height of that a
tag represents is inherited from the styling of it’s parent container. Thus if it is nested within a paragraph; the
will equal the height of 1 line of text based on the line-height and font-size of that paragraph.

I now have an empty page but the page is 10 pixels tall because I specified that the paragraph should be 10 pixels and even though the paragraph is essentially empty, it’s not empty because I have a break. Thus the break is equivalent to the height of 1 line of text.

The current CSS1 properties and values cannot describe the behavior of the ‘BR’ element. In HTML, the ‘BR’ element specifies a line break between words. In effect, the element is replaced by a line break. Future versions of CSS may handle added and replaced content, but CSS1-based formatters must treat ‘BR’ specially. — Cascading Style Sheets, Level 1, Section 4.6: ‘BR’ elements

An appropriate solution would be to separate the upper and lower block into two containers (

) and set a margin between the two blocks. If you use a

tag you can style the space between paragraphs without adding unwanted space to the top paragraph like this..

// CSS p + p < margin-top:10px >// for every paragraph that's preceeded by a paragraph add a margin of 10pixels above. this gets every paragraph except the first one. 

Or merely adjust the line-height of the text if you don’t mind the space between every other line increasing as well

You could potentially also find the pseudo-selector ::first-line useful.

Though I can’t fathom why; I do believe in the fact that there can at times always be a good reason to break the rules.. If you absolutely positively are deadset on styling the
wrap it in a container and set the line-height of the container.

Источник