如何在css/html中垂直縮小兩個單詞之間的空間

本來我的設計看起來就像這樣，除了加載時間非常糟糕，因爲大圓圈標誌是一個圖像，我很滿意。如何在css/html中垂直縮小兩個單詞之間的空間

所以，我能想到的加快加載時間的唯一方法是將其從圖像到CSS3改變，可惜我一直沒能找到一個很好的替代品，但是這是我目前有。

現在我現在主要關注的是試圖減輕「保爾」和「設計」之間的差距，但我不知道怎麼樣。

在一個不太重要的筆記中，如果您有任何方法可以保持原始設計而沒有可怕的加載時間，那就太好了。我試圖降低img質量，尺寸從1.6MB增加到140kb，負載依然很差。

div.homepage { 
 
\t position: fixed; 
 
    \t text-align: center; 
 
    \t margin: 0 auto; 
 
\t left: 0; 
 
\t right: 0; 
 
} 
 

 
/* Logo Design */ 
 
div.circle { 
 
\t margin: 0 auto; 
 
\t border-radius: 50%; 
 
\t width: 900px; 
 
\t height: 900px; 
 
\t display: flex; 
 
\t justify-content: center; 
 
\t align-items: center; 
 
\t flex-direction: column; 
 
} 
 

 

 
p.pavel, p.design { 
 
\t font-family: 'Open Sans', sans-serif; 
 
\t font-size: 10em; 
 
\t color: \t #708090; 
 
}

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

來源

2016-11-07 oneman

你能提供JSFiddle或codepen的例子嗎？ – AVI

段落元素默認有一個保證金，如果你刪除它，然後他們應該更接近彼此垂直。您可以調整邊距或使用一些填充來獲得所需的間距。

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

來源

2016-11-07 01:49:06 Drown

我認爲在我發佈之後，我向「設計」中添加了-200px的邊距，但您的方法看起來基本相同，而且更乾淨。 – oneman

試試這個。

p.pavel, p.design{ 

    line-height:1; 
    margin:0; 

}

來源

2016-11-07 06:30:04

如何在css/html中垂直縮小兩個單詞之間的空間

回答

相關問題