Html spacing after line

Add a space (» «) after an element using :after

I want to add a blank space after some content, however the content: » «; doesn’t seem to work. This is my code:

I don’t understand the expected outcome. Are you trying to add padding using content . It seems like it’d be impossible to tell if the space was added.

It is a weird question, you should use padding for adding space, no content:after, maybe you do not know about the difference between display:inline and display:block?

I found adding a space using this method was also useful when overflow: hidden of a block element would cut off the last few pixels of the last character of italic text. Padding wouldn’t help in this case.

Padding doesn’t help if you want your space to be underlined using text-decoration: underline; either.

6 Answers 6

Turns out it needs to be specified via escaped unicode. This question is related and contains the answer.

Worth nothing that this will add a NON-BREAKING space. If you want a normal space, you need «\0020» instead of «\00A0».

Might be worth noting, too, that adding a normal space won’t do anything. If you have no whitespace between the text in this, and the preceding element, this will not add one. A normal space will just collapse into itself.

@Offlein please add ` \0020` as a separate answer because some fonts, eg Font Awesome will not allow \00A0 to display a space, and if you want a space between elements rather than before or after you can’t use padding

Explanation

It’s worth noting that your code does insert a space

However, it’s immediately removed.

White space content that would subsequently be collapsed away according to the ‘white-space’ property does not generate any anonymous inline boxes.

If a space (U+0020) at the end of a line has ‘white-space’ set to ‘normal’, ‘nowrap’, or ‘pre-line’, it is also removed.

Solution

So if you don’t want the space to be removed, set white-space to pre or pre-wrap .

I don't have space:
 
I have space:

Do not use non-breaking spaces (U+00a0). They are supposed to prevent line breaks between words. They are not supposed to be used as non-collapsible space, that wouldn’t be semantic.

It looks like white-space is not supported in iE11 nor Edge (see caniuse.com/#search=white-space). is therefore the answer by user bradley.ayers better? (I don’t know, there are other aspects like semantics or line-break behavior)

I needed this instead of using padding because I used inline-block containers to display a series of individual events in a workflow timeline. The last event in the timeline needed no arrow after it.

Ended up with something like:

.transaction-tile:after < content: "\f105"; >.transaction-tile:last-child:after

Used fontawesome for the gt (chevron) character. For whatever reason «content: none;» was producing alignment issues on the last tile.

Источник

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 eliminate the space after the second line?

See how the code work here I need a way to put the «goodbyeeeeee..» string 2px below the h2 headline without ( if possible ) using margin with negative numbers ). Obviously I need also the space between the 2 lines of the h2 headline. EDIT: I can also avoid to use line-height but I need the space between the 2 lines of the h2 headline.

You need to ‘make up your mind’. First you tell the browser to make all lines 100 pixels high, then you decide not all of them. CSS cannot do that inside an element, so you’ll have to resort to negative margins. No reason not to actually, it’s a good solution.

Agreed. Negative margins are the way to go here. That’s what they are for, and they work really well.

Whatever CSS trick you try, it will look ugly after some text-only zoom (think of 1 line if the text is small enough, 3 lines when big enough). Best way is to split the H2 text into 2 elements with different margins.

3 Answers 3

I don’t think it’s possible to change the way line-height behaves. It puts the text of the h2 in the middle of the 100px high line.

So, sorry, but no. Unless you find a way to get rid of the line-height property, you’re stuck with using negative margins. Or relative positions.

Edit:
If you do use a negative margin, please put in on the h2 itself, not on any other element that happens to come after it in your current page. The h2 is causing the problem, so that’s where you should solve it.

Источник

Space after line break in paragraph

I’m displaying programming content on my HTML page using light yellow boxes, similar to this page. To make a yellow box, I use a

tag with a special class, and for that class I put in a background color as well as font-family: «Courier New» . Between lines within the same box, I use the
tag to break line. Now the problem is that, as you can see in that link, sometimes there’s supposed to be some space after the line break. But the space doesn’t show up for me. How can I make it appear?

2 Answers 2

Don’t use a paragraph for that; use a pre :

first line second line; next line will be blank fourth line
 
 
 
Use the tag, like the example, instead of 
.
 
 
# File actionpack/lib/action_view/helpers/url_helper.rb, line 324 defbutton_to(name, options = <>, html_options = <>) html_options = html_options.stringify_keys . "#<div>###</div></form>".html_safe end 
 
 
 
Linked
 
Related
 
 Hot Network Questions 
 
Subscribe to RSS
 
To subscribe to this RSS feed, copy and paste this URL into your RSS reader.
 
Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.25.43544
 
By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.
 
Источник
 
Line-height affecting spacing above first line and after last line
 
 
I’ve a text in side heading with multiple lines. Want the spacing the two lines to increase, so I set a line-height. When I do this, not only does it increase space between the two lines, it also increases spacing above the first line (and maybe below the second). How can I increase spacing between the two lines only, without increasing above and below. I know it’s a behavior of Line-height . but just curious if there is any good solution for this. This is just en example to what I’m asking. Jsfiddle: http://jsfiddle.net/jitendravyas/V3eWV/ 
 
1 Answer 1
 
You can use negative margins for this, although there is something to keep in mind:
 
line-height is a funny thing. According to CSS2.1 it doesn’t specify the line-height but the minimum height of line-blocks:
 
 
On a block container element whose content is composed of inline-level elements, ‘line-height’ specifies the minimal height of line boxes within the element. The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element’s font and line height properties. We call that imaginary box a «strut.» (The name is inspired by TeX.).
 
 
 
In an inline formatting context, boxes are laid out horizontally, one after the other, beginning at the top of a containing block. Horizontal margins, borders, and padding are respected between these boxes. The boxes may be aligned vertically in different ways: their bottoms or tops may be aligned, or the baselines of text within them may be aligned. The rectangular area that contains the boxes that form a line is called a line box. 
 
 
This doesn’t change in CSS3 very much, at least if you don’t change the line-stacking . However, there is no property which targets your problem directly: you can’t change the line-height of the ::first-line , it will always get applied.
 
That said, use negative margins for the time being. Even better, wrap your elements in a generic container. By using :first-child and :last-child you can add as many elements as you like.
 
Example
 
 
I've a text in side heading with multiple lines. Want the spacing the two lines to increase, so I set a line-height. When I do this, not only does it increase space between the two lines, it also increases spacing above the first line.
 
I've a text in side heading with multiple lines. Want the spacing the two lines to increase, so I set a line-height. When I do this, not only does it increase space between the two lines, it also increases spacing above the first line.
 
 
 
body div h1 div > h1:first-child < margin-top:-.25em; >div > h1:last-child
 
Источник