如何消除您无法控制的不需要的填充?

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>

我尝试填充顶部：-23 px; 试图吸出单词，但它不会移动。只有边距顶端才能完成这项工作。我尝试消除左侧和"San"上方的空间。如果你使背景：灰色;在 .location 上，您将看到空格是填充而不是边距。

Answer 1

我认为问题是字体。玩line-height.这可能会有所帮助。

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

Answer 2

首先...填充：-10px;这是行不通的。解决方案是您可以使用顶部和底部空间的行高，以及左侧空间的文本缩进，就像我在代码中所做的那样。请查看演示：

* {
	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;
	line-height: 62px;
	text-indent: -6px;
	text-align: left;
	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>

Answer 3

元素上没有填充。您可以使用Google Chrome或Mozilla Firefox检查代码片段并将鼠标悬停在该元素上。您将看到，该元素没有填充，也没有边距。 这里的问题是您使用的字体。尝试较小的行高：line-height: ;。