css - 如何消除您无法控制的不需要的填充？

Question

*{
  padding:0;
  margin:0
}
html,body{
  height:100%;
}
.background{
  height:100%;
  width:100%;
  background-image:url('http://tombricker.smugmug.com/Travel/San-Francisco-California/i-jk2Z7D7/0/L/san-francisco-golden-gate-bridge-morning-sun-bricker-L.jpg');
  background-size:cover;
  background-position:center;
  overflow:hidden;
}
.location{
  font-family: 'Playfair Display', serif;
  color:white;
  font-size:100px;
  
  padding:0;
  padding-top:-20px;
}

<link href="https://fonts.googleapis.com/css?family=Playfair+Display" rel="stylesheet">

<div class='background'>
  <div class='location'>San Francisco</div>
</div>

我试过 padding-top:-23 px;试图把这些话吸起来，但它不会动。只有 margin-top 可以完成这项工作。我尝试消除“San”左侧和上方的空间。如果您将背景设置为:灰色；在 .location 上，您会看到空白是填充而不是边距。

Answer 1

我认为问题出在字体上。玩转 line-height。这可能会有所帮助。

切勿使用负填充或边距。如果您需要这样做。你做错了:)