css - 新手的烦恼，怎么给<hr>元素设置粗细

Question

下面是HTML的问题部分：

<p id="main">
  <p>
    <h1>领先的 Web 技术教程 - 全部免费</h1>
    <p>*************</p><hr>
  </p>
</p>

下面是CSS的部分：

hr{
    height:2px;/*无效？？*/
}

本来想在文字底下设置分隔线，就用 <hr> 元素，现在想对 <hr> 标签设置粗细，没有反应？？CSS和HTML连接良好，其他样式设置都没有问题，求各位路过的好心人帮帮小弟，小弟正在入门阶段。

Answer 1

Each browser interprets the <hr> element slightly differently.

Specifically speaking, some browsers, such as FF, have a <hr> default of 2px, one bright and one dark. So setting 2px will not take effect.

Try to modify: http://jsfiddle.net/ronesam/q02ba8qr/

Solution:

hr {
    margin-top:7px;
    *margin: 0;
    border: 0;
    color: black;
    background-color: black; 
    height: 1px
}

Among them:

1. margin-top:7px;*margin: 0; is to solve the problem of inconsistent matgin-top between ie and ff;

2. border: 0; is a shadow line that removes ff;

3. color: black; is to set the color of the horizontal line in the old version of IE;

4. background-color: black; is to set the color of the horizontal line under FF;

5. height: 1px; is to set the height of the horizontal line. Of course, you can also set it to 2px or 3px;

Reference: http://www.css88.com/archives/942

PS:

• <p> tag represents a paragraph, it is best not to have other tags in it;

Empty tags such as

• <hr> and <br> are best written as: <hr /> and <br />; they conform to the specifications and are easy to read.

<p id="main">
  <p>领先的 Web 技术教程 - 全部免费</p>
  <p>*************</p>
  <hr />
</p>

Answer 2

hr {
    border: 0;
    border-bottom: 2px solid black;
}

Answer 3

hr {
    height : 2px; // 高度
    background : #000;// 背景色，一般来说设置了高度之后背景色默认白色了，所以加一个背景色为黑色
}

Answer 4

First point, it is best to close the hr tag, writing <hr/> like this.
The second point is that if you have a dividing line, you can use the border-bottom attribute of the p element inside, which is more friendly and the style can be customized