Css spacing between paragraph

Как увеличить или уменьшить интервал между абзацами на веб-странице с помощью CSS

Один из моих читателей просил рассказать, как изменить интервал между абзацами. Данная статья отвечает на этот вопрос.

Изменение расстояния между абзацами

Современные браузеры устанавливают расстояние между абзацами по умолчанию. Точное значение зависит от используемого браузера, так как оно не задано спецификацией HTML.

Вот пример таблицы стилей для HTML 4 от Консорциума W3 , в которых устанавливается верхнее и нижнее поля равными 1.12em. Поэтому разрыв между абзацами будет составлять 1.12em.

Чтобы узнать, как ваш браузер задает эти разрывы, запустите инструменты веб-разработчика и проверьте значения, заданные для полей, границ и отступов каждого абзаца.

Таким образом я обнаружил, что Firefox устанавливает поле до и после каждого абзаца в значение, равное размеру используемого шрифта. При этом оставляя размер границы и отступы равными нулю. Получается, что Firefox задает для каждого абзаца следующие стили:

Но это не гарантирует, что между абзацами будет пробел в 2em, потому что нижнее поле первого абзаца добавляется к верхнему полю второго абзаца. Вместо этого поля перекрывают друг друга, оставляя расстояние, равное большему из двух полей.

В приведенном выше примере оба поля имеют одинаковый размер, поэтому расстояние между абзацами составляет 1em.

Таким образом, расстояние между абзацами устанавливается с помощью верхнего и нижнего полей. Например, чтобы увеличить промежуток до 2em, используйте следующий код:

Источник

How do I Increase/Decrease the Space Between Paragraphs on a Web Page (CSS)

And how to prevent the distance between paragraphs from growing when double-spacing

How do I Increase/Decrease the Space Between Paragraphs on a Web Page (CSS)

One of my visitors wanted to know if there was a way to change the distance between the paragraphs on his web page. This article answers that question.

He also had a particular application in mind. He had previously read How to Double-Space Text but found that when he changed the line spacing, the gap between paragraphs also increased, which he did not want. I will also address this specifically.

Preamble

This tutorial requires you to have a bit of HTML and CSS knowledge. You do not need to be an expert, but, at minimum, you should know how to insert CSS rules.

Changing the Distance Between Paragraphs

Web browsers set a default amount of space between paragraphs. The exact value probably varies between browsers, since it is not guaranteed by the HTML specification, but the distance appears to be set using the margin property.

For example, the sample style sheet for HTML 4 from the W3 Consortium (which browser vendors are not obligated to follow since it’s just an example) sets the top and bottom margins to 1.12em. A browser implementing this will therefore have a gap of 1.12em between paragraphs.

If you are deeply curious about how your browser actually implements this, one way to find out is to use it to open any web page that has multiple paragraphs, fire up its web developer tool, and check the values given for the margins, borders and padding of each paragraph.

For example, when I tried this with Firefox (using «Tools | Web Developer | Inspector»), I found that it sets the margin before and after each paragraph to a number that is equal to the font size, while leaving the size of the border and padding at zero. This suggests that for Firefox, the default style for each paragraph, where the top and bottom margins are concerned, is effectively the following:

For those wondering why I said «1em» when Firefox’s developer tool gives a number in pixels, I found that the latter number invariably matches the font size. (Try changing the font size of the page, and you will find that the number of pixels for the margin changes to match.) Since the size of a font is by definition 1em, and the margin is pegged to it, it implies that the top and bottom margins are set to 1em.

In addition, if you are not familiar with how CSS handles margins for adjacent paragraphs, I should also explain that the above rules do not mean that you get a space of 2em between them, where the bottom margin of the first paragraph gets added to the top margin of the second. Instead, the margins overlap each other (or «collapse» in technical parlance), leaving behind a distance that is equal to the larger of the two. In the case above, since both margins measure 1em, they overlap each other perfectly, and the resulting gap between paragraphs is 1em.

Changing the space between paragraphs is thus a matter of altering the top and bottom margins. For example, to increase the gap to 2em, add this to your style sheet:

You can of course change 2em to whatever number that suits your purpose.

How to Prevent the Gap Between Paragraphs from Increasing When Changing the Line Height

With the above in mind, it should be trivial to solve the «problem» that my visitor was facing. In his case, he used the following CSS rule to double-space the text:

Applied to a block of demo text, the results look something like this:

These two paragraphs are here for the sole purpose of demonstrating the effect that line-height has on the spacing between them.

Notice that the gap between paragraphs is wider than that between the lines within each paragraph.

Since each line has a line-height of 2, the last line of the first paragraph has additional space following it and the first line of the second has some extra space above it. Add this to the default gap between paragraphs and you get the results you see above.

While this looks acceptable, since the typical way on the Internet of showing a new paragraph is to have some additional space before it, there may be situations where you don’t want the spacing to be any different from that between individual lines. If so, simply set the top and bottom margins to 0.

If you do this, and find that it is hard to see where one paragraph ends and another begins, one solution is to indent the first line of each paragraph. The property to use for this is text-indent .

These two paragraphs are here for the purpose of demonstrating how line-height and margins affect the spacing between them.

The gap between paragraphs should now be identical to that between each line.

If you don’t like what you see, feel free to change the margins to some other number. Just experiment with different values till you get the desired effect.

Copyright © 2019 Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.

thesitewizard™ News Feed (RSS Site Feed)

Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

Related Articles

New Articles

Popular Articles

How to Link to This Page

It will appear on your page as:

Copyright © 2019 Christopher Heng. All rights reserved.
thesitewizard™, thefreecountry™ and HowToHaven™ are trademarks of Christopher Heng.
This page was last updated on 2 September 2019.

Источник

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.

Источник

Changing Spacing Between Paragraphs and Inside of Paragraphs

HTML is a markup language that offers numerous elements that create the website structure. CSS supports HTML in a way that it provides different styling and position properties to the HTML elements. More specifically, the HTML “ ” element specifies the paragraph in a document. The paragraphs can be adjusted with CSS properties, such as “margin”, “line-height”, “word-spacing”, and many more.

This write-up will instruct you:

Prerequisite: Create an HTML File

The HTML page can be created by following the instructions:

• Add two “ ” elements in the HTML file.
• Assign ids as “para1” and “para2”, respectively.
• Specify paragraph content within these as given below:

Successful people simply put in a lot of effort and succeed on goal; they do not have natural talent.

Successful people simply put in a lot of effort and succeed on goal; they do not have natural talent. < / p >

Successful people simply put in a lot of effort and succeed on goal; they do not have natural talent.

Successful people simply put in a lot of effort and succeed on goal; they do not have natural talent. < / p >

How to Change the Spacing Between paragraphs in CSS?

The “margin” property can add spaces between the paragraphs. Moreover, using the “margin-bottom” property would be a good choice in this case.

Let’s add a border property to show the margin space prominent.

Style “para1” Class

The “.para1” is used to access the

element with the id “para1” and apply the following properties:

• “border” property is applied with the value of border width, style, and color sets the border around the paragraph.
• “margin-bottom” adds space at the paragraph’s bottom.

Style “para2” Class

The “ ” element having the id “para2” is also applied with the border using the CSS “border” property.

It can be observed that the spaces have been successfully added between the paragraphs:

How to Change the Spacing Inside of Paragraphs in CSS?

The CSS “line-height” property is utilized to add spaces between the lines of the paragraph.

To do so, add the line-height property to the “ ” element having id “para1”:

That was all about changing spaces between the paragraphs.

Conclusion

To change spaces between the paragraphs, first, add paragraphs in the HTML file by using the “ ” element. Then, the CSS “margin-bottom” property is utilized to add space between the paragraphs. The CSS “line-height” property adds spaces inside the paragraphs. This post has elaborated on the procedure to change the spacing between paragraphs and inside of paragraphs.

About the author

Nadia Bano

I am an enthusiastic and forward-looking software engineer with an aim to explore the global software industry. I love to write articles on advanced-level designing, coding, and testing.

Источник