如何减小 Logo 类中标题的大小？我的 Logo 包含名称“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>
最佳答案
因此，您的 h1 将保留一个默认的 margin 值，您必须使它们成为 0。只需将以下样式添加到您的 css
h1{
margin:0;
}
或
*{
margin:0;
}
注意:由于 line-height 属性，您仍然会发现顶部和底部的空间很小，您也可以减少它们以完全适合您的 Logo 背景颜色
关于css - 我需要减小标题背景颜色的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25767015/