Question

          <!doctype html>
        <html>
        <head>
            <title>Page Title</title>
            <meta charset="UTF-8">
            <meta name="viewport" content="initial-scale=1.0">
            <style> 

                body{
                    padding:0;
                    margin:0;
                    font-family:sans-serif;
                }
                .container{

                    width:80%;
                    margin:0 auto;


                }

                header{
                    margin:0;
                    min-height:90px;
                    background-color: #344249;
                    border-bottom:#e8491d 3px solid;

                }
                header h1{
                    float:left;
                }
                h1 span{
                    margin-left:70px;
                    display:inline-block;
                    color:#db1c1c;
                }

                nav{
                    float:right;
                }        
                nav ul li{
                    display: inline-block;
                    list-style: none;
                }

                nav ul li a{
                    display:inline-block;
                    text-decoration:none;
                    padding:10px;
                    margin-top:12px;
                    color:white;
                    border:2px solid #be1414;
                    background-color:#be1414;
                    margin:5px;
                    border-radius:4px
                }

                nav ul li a:hover{
                    background-color:black;
                    color:red;

                }
                #one{
      min-height:400px;
      background:url('./img/showcase.jpg') no-repeat 0 -400px;
      text-align:center;
      color:#ffffff;
      margin:0;
    }
    #one h1{
    margin-top:100px;
        font-size:55px;
        margin-bottom:10px;
     }
                #one p{
                    font-size:20px;
                  }
      </style>
        </head>
        <body>
    <header>
        <div class="container">

            <div id="branding"> 
            <h1> <span>ė</span>View</h1>
             <nav>
                 <ul>
                     <li><a href="#">Home</a></li>
                     <li><a href="#">AboutUs</a></li>
                     <li><a href="#">Services</a></li>


                 </ul>

             </nav>  

      </div>
        </div>
    </header>

    <section id="one">

        <div class="container">

            <h1> Welcome  To Tech 
            </h1>
            <p> This is a <br>
            Example </p>
        </div>
    </section>


        </body>
    </html>

Output

//这里在标题h1上应用了不必要的余量，它正在从标题中拉出我的部分，留下不必要的空间。我已经尝试了很多方法来使这个间隙禁用但无法找到合适的解决方案

我想将margin-top应用于标题h1的标题h1以使其在中心对齐，这就是为什么我使用#one h1 { 保证金：100像素 }

通过在id内写入等于0的余量，h1正在消失标题和节之间的差距，但在id为1的节中阻止了h1的边距设施。

Answer 1

试试这个标题

.header{
     position:absolute;
     top: 0;
     right: 0;
     left: 0;
     height:90px;
     background-color: #344249;
     border-bottom:#e8491d 3px solid;

}

#one h1{

margin-top:100px;
    position: absolute;
    top:90px;
    font-size:55px;
    margin-bottom:10px;
 }

而不是制作代码<header>而只是制作<div class="header">

如果您遇到任何问题，可能需要对其他css规则进行一些调整：）

Answer 2

将margin-top更改为padding-top

#one h1{
    padding-top:100px;
    font-size:55px;
    margin-bottom:10px;
 }

基本上，margin会推动元素内部和padding空间。

使用html5和css3在标题标记和节标记之间出现不必要的差距

2 个答案: