Question

最初我的设计看起来像这样，我很满意，除了加载时间非常糟糕，因为大圆圈标志是一个图像。

所以我想到加速加载时间的唯一方法是将它从图像更改为css3，不幸的是我还没能找到一个好的替代品，但这就是我现在所拥有的

现在我的主要关注点是试图缩小与Pavel＆＃34;之间的差距。和＆＃34;设计＆＃34;但我不知道怎么做。

在一个不太重要的注意事项上，如果你有任何方法让我能够保持原始设计而没有可怕的加载时间那么好。我尝试降低img质量，尺寸从1.6MB增加到140kb，负载仍然不好。

＆＃13;

div.homepage {
	position: fixed;
  	text-align: center;
 	margin: 0 auto;
	left: 0;
	right: 0;
}

/* Logo Design */
div.circle {
	margin: 0 auto;
	border-radius: 50%;
	width: 900px;
	height: 900px;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}


p.pavel, p.design {
	font-family: 'Open Sans', sans-serif;
	font-size: 10em;
	color:	#708090;
}

＆＃13;

<body>
	<div class="homepage">
		<div class="circle">
			<p class="pavel">Pavel</p>
			<p class="design">Design</p>
		</div>
		<ul>
			<li class="button"><a href="index.html" data-text="Home">Home</a></li>
			<li class="button"><a href="about.html" data-text="About">About</a></li>
			<li class="button"><a href="services.html" data-text="Services">Services</a></li>
			<li class="button"><a href="contact.html" data-text="Contact">Contact</a></li>
		</ul>
	</div>
</body

＆＃13;

Answer 1

默认情况下，段落元素有一个边距，如果你删除它，那么它们应该垂直相互靠近。您可以调整边距或使用一些填充来获得所需的间距。

p.pavel, p.design{
    margin: 0;
}

Answer 2

试试这个。

p.pavel, p.design{

    line-height:1;
    margin:0;

}

如何在css / html中垂直缩小两个单词之间的空间

2 个答案: