Question

我可以增加hr标记的默认边距。但我无法将hr的余量减少到零。我只需要水平线，顶部和底部边距为零

<p>This is header</p>
<hr class="divider" />
<p>This is content. I just want to reduce the margin of hr tag</p>

hr.divider
{ 
   margin-top: 0em;
   margin-bottom: 0em;
   border-width: 2px;
}

另见this jsfiddle。

Answer 1

你已经成功了。 hr没有上边距或下边距。它是显示p和/或padding的{{1}}元素。在这里你可以看到这个：

＆＃13;

margin

＆＃13;

 hr.divider { 
  margin: 0em;
  border-width: 2px;
} 

p {
  margin: 0;
  padding: 0; 
}

＆＃13;

Answer 2

使用语义标记和一些CSS可能会做得更好。 <hr>不是语义的，它们没有任何意义，只是作用于页面的视觉方面。以下是我建议使用语义标记的方法：

<强> HTML

<h1>This is header</h1>
<p>This is content. I just want to reduce the margin of hr tag</p>

<强> CSS

h1 {
    border-bottom: 1px solid #ccc; /* This is the line replacing the hr*/
    margin-bottom: 10px; /* This is the space below the line */
    padding-bottom: 15px; /* This is the space between the heading text and the line */
}

here's the fiddle。

Answer 3

 hr.divider { 
  margin: 0em;
  border-width: 2px;
} 

p {
  margin: 0;
  padding: 0; 
}

<p>This is header</p>
<hr class="divider" />
<p>This is content. I just want to reduce the margin of hr tag to zero</p>

Answer 4

这对我有用

hr {
  margin-top: 0.35em !important;
  margin-bottom: 0.35em !important;
  border-width: 1px;
}

Answer 5

hr{
   border:none;
  }

要删除默认边距，请将以下CSS应用于hr元素。

如何减少hr标签的默认边际？

5 个答案: