[css - hr ] border color 横线高度和颜色

程序员文章站 2022-07-08 19:22:15

...

如果设定 hr 的 border，会发现其高度会比不设置高2倍，即使高度设为最小值： 1px;

hr{
    border: 1px solid #bbe;
}

这是什么原因？

原来 hr 也是遵守盒子模型，具有四条边：

border-top
border-bottom
border-right
border-left

如果要想 hr 更瘦一些，应该只设置 top 或 bottom，而其它边框格式设置为0

height:1px;
border: 0;
border-top:1px solid #bbe;

例如：

hr{
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #bbe;
    margin: 0;
    padding: 0; 
}