在CSS中将底部边框上移

Question

6

我该如何使用CSS将底部边距向上推约5像素？

这里有一个示例，我想要实现的效果在这里。 push up border

- user669677

你能否展示一下你尝试过的 HTML 和 CSS 代码？ - Dipesh Parmar

我尝试过使用负边距/填充。 - user669677

不过解决方案是将行高设置为更小。http://jsbin.com/umeniz/2/ - user669677

你考虑过使用下划线代替边框吗？ - Spudley

@Spudley 是的，但那不一样。 - user669677

4个回答

2

你可以使用CSS规则line-height:来达到这个效果。

设置line-height: 18px;即可实现此技巧。

- Dipesh Parmar

1

尝试一下这个fiddle，它使用填充(padding)。

padding-bottom: 5px;

- sagibb

0

你可以使用下划线来实现。就像这样：

h1 {
  font-size: 24px;
  padding: 0;
  color: #FF6A00;
  text-decoration: underline;
}

h1 span {
  color: #000;
}

然后只需将文本放入一个 span 中的 h1 中即可：

<h1><span>Szavazás az új domain-ról</span></h1>

请查看这个JSFiddle。

- PurkkaKoodari

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Praveen Kumar Purushothaman · Accepted Answer

虽然你可以使用 line-height，但它可能会影响下一行的文本。所以我建议这样做：

h1 {
  font-size: 24px;
  border-bottom: 2px solid #FF6A00;
  /* proposing line height + padding */
  line-height: 20px;
  margin-bottom: 5px;
}