Quite often, novice web designers have problems during the development of cascading style sheets (CSS). Not the exception is to work with line spacing in CSS. Line spacing is the distance between the lines vertically. As in a conventional Microsoft Word document, the text of the html file is also possible to change this setting.

Using line-height when you change the interval

The first and most correct solution to the problems with the job intervals will be of value to the property line-height. The default value of this property equals normal (line-height: normal;). Line spacing is calculated automatically by the browser and depends, inter alia, the type of font and its size. Any positive numeric value that will be set in the style property line-height, the browser will be seen as a number by which to multiply the size of the current font.

In CSS line spacing can be specified in different units of length: points (pt), inches (in) pixels (px) and percentages (%). The percentage is calculated relative to the current font, and by default, its value equals 100 %. Do not forget that the property line-height borrows the value of the inherit from its parent element.

Here are a few examples how to increase line spacing in CSS: <p class=”stroka”> .

The process of working with line intervals is quite simple. You must have basic knowledge of CSS and the ability to connect the file to the main html page. Styles can also be set directly in the html page: </p>

So in this proposal to do one and a half interval, it is necessary in the CSS file add this code:

p.stroka {

line-height: 1.5;

}

To do double spacing, you can write code like this:

p.stroka {

line-height: 2;

}

or

p.stroka {

line-height: 200%;

}

In both cases, the browser will understand what the current font multiplied by 2. This is line spacing.

Now here is an example of how to reduce line spacing (CSS):

It is important to remember that a negative value for line-height is not perceived, therefore, its minimum value can be 0. In order to get half the interval, you have to add this code:

p.line {

line-height: 0.5;

}

or

p.line {

line-height: 50%;

}

or

p.line {

line-height: 2;

}

or

p.line {

line-height: 0.5 pt;

}

All 3 variants are correct and meet all W3C standards, respectively, will work in any version of the browser.

Use padding when you change the interval

However, in addition to changing the properties line-height, there is another way in CSS to change the line spacing, it will be a “game” with the values of padding properties. Style padding property is responsible for the internal margins in your html object. By default this property is 0. Selecting different values can change the line spacing, for example: <p class=”second”>.

To work with line spacing very simply. It is enough to know the basics of CSS and be able to connect the file to the main html page. It can also be set directly on the page with the. html extension.</p>

To increase line spacing increase the value of the property:

p.second {

padding: 10px;

}

Thus, the distance between the lines in our paragraph will be increased by 10 pixels. With the same success it is possible to reduce the line spacing by typing for example:

p.second {

padding: 0px;

}

A negative value of line spacing

If you notice, are also not allowed to enter negative values that did not overlap in the lines to each other. In CSS line spacing can not have negative values. From the point of view of observance of the rules of writing code and W3C standards, you will never be able to write negative values in the line spacing values.

Change line spacing in lists

Sometimes you want to change line spacing in lists <ul> and <ol>. The previous methods will not lead to the desired result, however, there is one property that can change the interval in the list is a property – margin. This stylistic feature can be both positive and negative value. Show the change line spacing in the list for example:

the <ul>

the <li><a href=”#”>Item 1</a></li>

the <li><a href=”#”>Item 2</a></li>

the <li><a href=”#”>Item 3</a></li>

</ul>

To increase the padding you need in CSS file to set the following lines:

ul li{

margin-top: 10px;

}

Thus, we indicated that the distance from each item in the list is increased by 10 pixels. And in this case it is possible and a negative value. Thus, we can ask: – margin-top: -15px.

НАПИСАТИ ВІДПОВІДЬ

Please enter your comment!
Please enter your name here