Home  >  Article  >  Web Front-end  >  How to set the distance between horizontal line and text in html

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

青灯夜游
青灯夜游Original
2021-06-08 16:22:063643browse

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.

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

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:

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

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn