logo标签列表

如何在CSS中实现负边距？

htmlcssfontscss-positionpadding
13

我正在寻找一种有效地在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的父元素的padding和margin都设置为0。

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

不能存在负填充。如果有的话，那么它根本就不是填充。 - Lee
我知道这不是主要问题的答案，但对于任何可能因与我相同原因而在此处的其他人来说，请注意HTML文档中的<br>标签！ - aderchox
3个回答
11

这完全取决于你使用的字体，但在你的情况下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
使用负边距来实现与负填充相同的效果。最初的回答。
不知怎么的，我必须将这个与负vertical-align结合起来。 - iBug
2
你没有尝试的一件事是调整line-height。

10.8 行高计算： line-height 和 vertical-align 属性

对于一个内容由内联级别元素组成的块容器元素，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;
}
<h1>Lorem Ipsun Al</h1>

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接