我需要減小標題背景顏色的大小

如何減少徽標類中標題的大小？我的標誌包含名稱「PIED PIEPR」。但是標題中的背景圖片非常大。我試着降低高度屬性，但沒有工作。我需要減小標題背景顏色的大小

Style Sheet: 

    body{ 
     margin: 100%; 
     margin: 0; 
    } 

    .container{ 
     position: relative; 
     height: 50px; 
     width: 1100px; 
    } 

    .masthead{ 
     background: #4fc3f7; 
     width: 100%; 
     top: 0; 
     position: fixed; 
     color: white; 
    } 

    .logo{ 
     position: relative; 
     float: left; 
     left: 90px; 
     font-family: Josefin Slab; 
     font-size: 21px; 

    } 

    a:link {color: white; text-decoration: none; } 
    a:visited {color: white; text-decoration: none; } 
    a:hover {color: white; text-decoration: none; } 
    a:active {color: white; text-decoration: none; } 

    li{ 
     position: relative; 
     left: 155px; 
     list-style: none; 
     font-family: Raleway; 
     float: left; 
     margin-left: 21px; 
     padding-top: 20px; 
     font-size: 20px; 
    } 

    .navigation{ 
     float: right; 
    } 

Markup" 

<!DOCTYPE html> 
<html> 
<head> 
    <title> Home Page</title> 
    <link href='http://fonts.googleapis.com/css?family=Josefin+Slab' rel='stylesheet' type='text/css'> 

    <link rel="stylesheet" type="text/css" href="mainpage.css"> 
</head> 
<body> 

    <div class="masthead"> 
     <div class="container"> 
      <div class="logo"><h1><a href="#">CRUX</a></h1> 
      </div> 
      <div class="navigation"> 
       <ul> 
        <li><a href="#">Overview</a></li> 
        <li><a href="#">Courses</a></li> 
        <li><a href="#">Institution</a></li> 
        <li><a href="#">|| Sign In</a></li> 
        <li><a href="#">Sign Up</a></li>  
       </ul> 

      </div> 
     </div> 
    </div> 
    <div class="container"> 
    </div> 
    <div class="content"> 
     <p> </p> 
    </div> 

</body> 
</html>

來源

2014-09-10 rrr babu

顯示JS小提琴請 – 2014-09-10 13:41:31

我只有標記。 – 2014-09-10 13:42:36

那麼你真正的需要 – Benjamin 2014-09-10 13:45:44

所以你h1將舉行一個默認值margin你必須讓他們0。只是下面的樣式添加到您的css

h1{ 
    margin:0; 
}

*{ 
    margin:0; 
}

注意：你仍然會發現在頂部和底部這就是小空間，因爲line-height屬性還可以減少他們以完全符合您的標識background-color

DEMO

來源

2014-09-10 13:48:29 Benjamin

謝謝BENJAMIN，它幫助。 – 2014-09-10 13:55:31

無論如何，我可以學習更多的CSS？ – 2014-09-10 13:56:31

歡迎你的傢伙。 :) – Benjamin 2014-09-10 14:00:02

我需要減小標題背景顏色的大小

回答

相關問題