我需要减小标题背景颜色的大小

如何减少徽标类中标题的大小？我的标志包含名称“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

我需要减小标题背景颜色的大小

回答

相关问题