如何在 CSS 中实现负填充？答案

【问题标题】：How do I achieve negative padding in CSS?如何在 CSS 中实现负填充？
【发布时间】：2019-05-27 04:17:17
【问题描述】：

我正在寻找一种在 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;，因此文本看起来好像正在流入页面的其余部分。我要实现这种外观，还要针对文字的顶部，而不仅仅是底部。

我尝试了什么

我试过了：

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

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

【问题讨论】：

不能有负填充之类的东西。如果有，那么它根本就不是填充。
我知道这不是主要问题的答案，但是对于可能因为与我相同的原因而来到这里的其他人，请注意 html 文档中的
s！跨度>

标签： html css fonts css-position padding

【解决方案1】：

这完全取决于您使用的字体，但在您的特定情况下 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>

【讨论】：

【解决方案2】：

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

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

在内容由内联级组成的块容器元素上元素，line-height 指定行框的最小高度在元素内。

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;
}

&lt;h1&gt;Lorem Ipsun Al&lt;/h1&gt;

【讨论】：

【解决方案3】：

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

【讨论】：

不知何故我不得不将它与否定的vertical-align结合起来。