Home > Article > Web Front-end > 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!