如何在 CSS 中实现负填充？

Question

我正在寻找一种在 CSS 中有效实现负填充的方法。

问题

我的网页上有一个 h1 元素，当前有以下关联代码：

h1 {
  background-color: #375E97;
  color: #FFFFFF;
  font-size: 50px;
  font-family: 'Righteous', cursive;
  text-transform: uppercase;
  text-align: center;
  padding: 0;
  margin: 0 auto;
  height: 49px;
}

<head>
  <link href="https://fonts.googleapis.com/css?family=Righteous|Roboto:400,700,400i" rel="stylesheet">
</head>

<body>
  <h1>Lorem Ipsun Al</h1>
</body>

您可以看到，由于我添加了：height: 49px;，文本看起来好像正在流入页面的其余部分。我想实现这种外观，而且还用于文本的顶部，而不仅仅是底部。

我试过的

我试过：

将 h1 元素的 padding 和 margin 都设置为 0。
使用 vertical-align 的各种值。
将 height 设置为许多不同的值。
将所有 h1's parent elements' padding 和 margin 设置为 0.

我认为我面临的问题是我使用的字体（和大多数字体）的顶部有一些 space。这就是为什么我希望能够实现负填充，在不移动内容框的情况下将文本在屏幕上向上移动。

Answer 1

您没有尝试的一件事是调整 line-height。

10.8 Line height calculations: the line-height and vertical-align properties

On a block container element whose content is composed of inline-level elements, line-height specifies the minimal height of line boxes within the element.

h1 {
    background-color: #375E97;
    color: #FFFFFF;
    font-size: 50px;
    font-family: 'Righteous', cursive;
    text-transform: uppercase;
    text-align: center;
    padding: 0;
    margin: 0 auto;
    line-height: .6;
}

<h1>Lorem Ipsun Al</h1>

Answer 2

这完全取决于你使用的字体，但在你的特定情况下 height: 34px 和 line-height: 34px; 做你想做的：

h1 {
  background-color: #375E97;
  color: #FFFFFF;
  
  font-size: 50px;
  font-family: 'Righteous', cursive;
  text-transform: uppercase;
  text-align: center;
  
  padding: 0px;
  margin: 0 auto;
  
  height: 34px;
  line-height: 34px;
}

<!DOCTYPE html>
<html>

<head>
  <link href="https://fonts.googleapis.com/css?family=Righteous|Roboto:400,700,400i" rel="stylesheet">
</head>

<body>
  <h1>Lorem Ipsun Al</h1>
</body>

</html>

Answer 3

在内部内容上使用负边距来实现与负边距相同的效果。

如何在 CSS 中实现负填充？

How do I achieve negative padding in CSS?

html

css

fonts

css-position

padding

问题

我试过的