• 技术文章 >web前端 >前端问答

    html怎么设置水平线与文字的距离

    青灯夜游青灯夜游2021-06-08 16:22:06原创111

    在html中,可以通过在水平线标签中,使用style属性添加外边距样式来设置水平线与文字的距离。而外边距样式可以使用margin、margin-top或margin-bottom属性来设置。

    本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

    html设置水平线与文字的距离

    <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>

    效果图:

    1.png

    说明:

    1、margin属性

    margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。

    实例:

    margin:10px 5px 15px 20px;
    margin:10px 5px 15px;
    margin:10px 5px;
    margin:10px;

    2、使用margin-top、margin-bottom属性

    (学习视频分享:css视频教程

    以上就是html怎么设置水平线与文字的距离的详细内容,更多请关注php中文网其它相关文章!

    声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
    专题推荐:html 水平线
    上一篇:在html代码中表示表格行的标记是什么 下一篇:html中scrolling是什么意思
    第16期线上培训班

    相关文章推荐

    • jquery中html()方法怎么用• html如何设置语言• 如何删除html注释• 在html代码中表示表格行的标记是什么• html如何设置标题

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网