Question

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

Answer 1

因此，您的h1将保留默认margin值，只需要0。只需将以下样式添加到css

即可

h1{
    margin:0;
}

或

*{ margin:0; }

注意：由于line-height属性，您仍然可以在顶部和底部找到很小的空间，您也可以减少这些空间以使您的徽标完全适合您的background-color < / p>
<强> DEMO

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

1 个答案: