How to set the distance between horizontal line and text in html

In HTML, you can set the distance between the horizontal line and the text by adding a margin style using the style attribute in the horizontal line tag. The margin style can be set using the margin, margin-top or margin-bottom attributes.

The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.

htmlSet the distance between the horizontal line and the text

<div>
	文字--没有设置距离
	<hr/>
	文字
</div>
<div>
	文字
	<hr style="margin-top: 20px"/>
	文字
</div>
<div>
	文字
	<hr style="margin-bottom: 20px"/>
	文字
</div>
<div>
	文字
	<hr style="margin: 20px 0 30px;"/>
	文字
</div>

Rendering:

Description:

1. Margin attribute

The margin abbreviation attribute sets all margin attributes in one statement. This attribute can have 1 to 4 values.

Example:

margin:10px 5px 15px 20px;

• The top margin is 10px

• The right margin is 5px

• The bottom margin is 15px

• The left margin is 20px

margin:10px 5px 15px;

• The top margin is 10px

• The right and left margins are 5px

• The bottom margin is 15px

margin:10px 5px;

• The top and bottom margins are 10px

• The right and left margins are 5px

margin:10px;

• All four Each margin is 10px

2. Use margin-top and margin-bottom attributes

• margin-top : Set the top margin of the element
  

• margin-bottom : Set the bottom margin of the element

(Learning video sharing: css video tutorial)

The above is the detailed content of How to set the distance between horizontal line and text in html. For more information, please follow other related articles on the PHP Chinese website!