Vertical strip symbol. How to add a line near the text

Vertical lines in HTML.

A vertical lines  are formed in virtually the same blocks

Formation of horizontal lines:

Tag

---

  inserts a horizontal line on the page and has the following attributes:

Tag syntax

---

:

Examples of horizontal lines in HTML:

Examples of vertical lines in HTML:

Here is an example of a horizontal red line at the top.

Here is an example of horizontal and vertical lines.

The syntax for examples of vertical and horizontal lines in HTML is:

note the border- style attribute left (-right): 4px solid # FF0000;:

Here is an example of a vertical red line on the left.

Here is an example of a vertical red line on the right.

Here is an example of a horizontal red line below.

To emphasize some especially important elements of the site, it would not hurt to use all sorts of styles and properties provided for this CSS. Of course, you can not bother with the text and highlight it, for example, in bold or italics, change the background or make a frame around the text. But not always one of the presented methods is suitable. Suppose you have a text that needs to be separated due to the specifics of its semantic load. This is where html and CSS properties come to the rescue.

How to make a line in the text using CSS

To implement our plan, we need to turn to style.css fileby writing in it the corresponding property border. Thereby, a line appears above, below, or on a certain side of the text. In turn, several properties are provided that are responsible for displaying the line, namely:

- border-top  - a horizontal line located above the text;

- border-right  - a vertical line located to the right of the text;

- border-bottom  - a horizontal line located below the text;

- border-left  - the vertical line to the left.

How to make a line in html

Using CSS properties, you can register all the necessary values \u200b\u200bby editing the HTML code. To do this, go to the administrative part of the site. Select one of the published materials, switch the text editor to the editing mode of the html code and add CSS properties. The sample can be seen below.

Brief command decryption

- width  - line length;

- solid  - solid line;

- dotted  - dotted line.

For a deeper look at the styles, I recommend reading this.

You need to understand that in the process of making changes to the site code, the properties that determine the type of line, its thickness and color are listed with a space.

The above method has several advantages:

An extensive range of features with which you can make almost any line.

Ease of making all the necessary changes directly to the HTML code. This greatly simplifies the task for inexperienced site builders.

How to make a straight horizontal line using an HTML tag

---

The first thing I would like to draw your attention to is that this tag, despite all the intricacies and principles of html, does not have a closing tag. It can be used anywhere in html code, between tags   and

.

Tag attributes

---

- width  - is responsible for the length of the line. It can be indicated both in percent and pixels.

- size  - line thickness. Indicated in pixels.

- color  - determines the color of the line.

- align  - attribute responsible for aligning the line. In turn, the command refers to it:

-  right  - alignment on the right;

- left  - left alignment;

- center  - central alignment.

Sample html code using tag

I hope you succeeded, and now you know how to make a line on your site. Leave your urgent questions in the comments, and we will discuss them.

Thank you and see you soon on the pages of Stimylrosta.

Task

Add text to the side of the paragraph vertical line.

Decision

You can draw the reader’s attention to the text in different ways. For example, make the text in bold, change its color, use the background, draw a frame. But what if it is required not only to highlight the text, how much to separate one text block from another, to divide them into different semantic parts? Here, the use of lines and indents is simply invaluable.

The text block on a web page is very different from its print counterpart. The main difference is the variable width and height of the text, which depend on the resolution of the monitor, settings operating system, browser, and other such things. These features give the layout of web pages a certain complexity, but at the same time generate specific techniques that greatly simplify the process of creating a site. Consider how you can use styles to create an arbitrary line near the text, independent of its size.

To create lines, use the CSS property - border, which sets the border around the block. In special cases, to create a line on only one side of the element, the border-bottom, border-top, border-left and border-right properties are used; they respectively set the line from bottom, top, left and right.

The values \u200b\u200bof these properties are listed with a space and immediately set the type of line, its thickness and color. The line style can take one of eight values, as shown in fig. 1, and the thickness is set, as a rule, in pixels.

Fig. 1. Line types

Example 1 shows the creation of a vertical line next to text.

Example 1. The vertical line to the left of the text

HTML5 CSS 2.1 IE Cr Op Sa Fx

Studying from a position close to gestalt psychology and psychoanalysis the processes in a small group that reflect the informal microstructure of society, J. Moreno showed that compulsiveness gives stress by virtue of which it mixes subjective and objective, transfers its internal motivations to the real connections of things.

To leave the original paragraph style unchanged, introduced new class  line, which sets a vertical line near the paragraph. This class, in addition, also sets the offset of 20 pixels from the left edge of the window to the text using the margin-left property and the indent from the line to the text through padding-left, without it the text will touch the line too tightly. The result is shown in fig. 2.