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一起玩。这可能有所帮助。

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

Answer 2

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

./switch_php [VERSION_NUMBER]

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

Answer 3

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

如何消除你无法控制的不必要的填充？

3 个答案: