如何裁剪標題的額外空間？

我剛剛爲我的第一個付費開發工作開發了一個當地說唱歌手的網站，我非常緊張。如何裁剪標題的額外空間？

我正在處理網站徽標和導航條，我遇到了一些問題。

這是我到目前爲止有：

我想是額外的空間剪切掉在橙色「花旗B」文本的頂部和底部。在擺脫了不必要的空間之後，我想將它對齊到limegreen div的底部。

這裏是所有相關的代碼。

HTML：

<div class="title-wrap"> 
      <div class="title1"> 
       <h1>Citi B.</h1> 
      </div> 

      <div class="title2"> 
       <img src="img/logo.jpg" alt="Dog Logo"> 
      </div> 
     </div>

CSS：

.title-wrap { 
width: 60%; 
margin: auto; 
background: limegreen; 
height: auto; 
} 

.title1, .title2 { 
background: orange; 
} 

.title1 h1 { 
font-size: 6em; 
bottom: 0px; 
margin: 0px; 
padding: 0px; 
font-family: 'Pacifico', cursive; 
}

Flexbox的代碼：

.title-wrap { 
-webkit-flex-direction: row; 
-webkit-justify-content: space-between; 
-webkit-align-items: flex-end; 
}

這個問題可能是解決很簡單，但我畫一個空白，什麼原因。感謝您提供任何幫助！

來源

2014-09-01 ClaytonAlanKinder

你的第一個問題是右邊的狗標誌，它太高，導致橙色盒子上方的綠色。 – RozzA 2014-09-01 04:22:38

哎呦。通過給它一個75％的最大寬度來修復它。 – ClaytonAlanKinder 2014-09-01 04:29:04

也要注意，這可能在其他瀏覽器（如Firefox和IE）上看起來很糟糕，因爲它似乎只有一些'-webkit'。 – RozzA 2014-09-01 05:16:36

我不明白你的問題，但我認爲你的問題是關於頁面頂部的空間。
你應該知道身體有一點餘量，你應該刪除它。此代碼可能可以幫助你。

body { 
margin: 0; 
}

好運。

來源

2014-09-01 04:38:22

如何裁剪標題的額外空間？

回答

相關問題