在CSS中用div和hr制作水平线和垂直线的教程这是一个简短的教程，举例说明如何在CSS中制作水平线和垂直线。当我们需

这是一个简短的教程，举例说明如何在CSS中制作水平线和垂直线。

当我们需要分割两个HTML组件时，HTML中的hr标签会在它们之间创建一条水平线。使用hr标签、border或自定义CSS样式，可以简单地创建HTML中的水平线。

HTML中的水平线

HTML中的hr标签被用来在内容之间提供主题性的中断。

HTML中的hr标签用于绘制水平线断点。hr标签有以下特点。- 不需要闭合标签

下面是水平线的一个HTML例子：

<!DOCTYPE html>
<html>

<head>

    <style>

    </style>
</head>

<body>
    <p>Paragraph1</p>
    <hr/>
    <p>Paragraph2</p>
</body>

</html>

没有hr标签的水平线

hr是一个断行符，用来画一条线。

你可以不使用hr标签来写一条线。举个例子，如何给一个div添加一条线？

在这个例子中，css边框带有颜色和线宽

<!doctype html>
<html lang="en">
<!DOCTYPE html>
<html>

<head>
<style>
.horizontal-line {
    padding-bottom: 20px;
    border-bottom: 3px solid #f0f0f0; 
}
</style>
</head>

<body>
   <div class="horizontal-line">This is div element</div>
   </body>


</html>