需要填充顶部的h1元素

时间:2018-11-05 16:39:04

标签: html css

我需要为元素'h1的顶部填充'订阅新闻通讯/ h1',尽管我已经将20px的填充完全取消了,请帮助,下面是代码,

我需要为元素'h1顶部填充'订阅新闻通讯/ h1',尽管我已经将20px的填充完全停止工作,请帮助,以下是代码,在此先感谢

<!DOCTYPE html>
<html>
  <head>
    <metadata name="viewport" content="width=device-width"/>
    <metadata charset="utf-8"/>
    <metadata name="keywords" content="vasu">
  <style>
  html{
    height:100%; 
    width:100%;
    margin:0px;
    padding:0px;
  }
    body{
        background-color:red;
        width: 100%;
        height: 100%;
        margin:0px;

    }
    header {

        color: white;
        height: 10%;
        width: 100%;
        background-color:blue;
        margin:0;
        padding:0;
        border-bottom:3px solid yellow;

    }
    header h1{
        float : left;
        padding-top : 10px;
        margin:0;
        text-align: center;

    }


    header ul{
        color:white;
        float : right;
        padding : 0;
        margin:0;
        list-style-type: none;


    }

    li{
     float:left;
     padding-top:20px;
     padding-right: 20px;
     text-align:center;
     font-size:20px
    }

    li a {

    color: white;
    text-decoration:none;
  }

  .orng{
    color: orange;
  }

  #showcase{
    text-align: center;
    color: black;
    height:40%;
    background: url('business-women-working_4460x4460.jpg') -200px;
    margin:0px;
    border:0px;
    padding-top:10px;
    padding-bottom:10px;

  }



  #newsletter h1{
    display:inline;
    margin:0px:
    padding:20px;  ------- its not working

  }

  #newsletter form{
    float:right;
    display:inline;
    padding : 20px;
  }

  </style>
  </head>
    <body>
          <header>
            <div class="container">
            <div id="logo">
              <h1><span class="orng">ACME</span> WEB DESIGN</h1>
            <nav>
              <ul>
                <li><a href="">Home</a></li>
                <li><a href="">Hostel</a></li>
                <li><a href="">Company</a></li>
              </ul>  
            </nav>
             </div> 
             </div>

          </header>

          <section id="showcase">
            <div class="container">
                <h1>Affordable Web design</h1>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas vitae sagittis diam. Donec efficitur metus non commodo tincidunt. Curabitur ornare consectetur eros ac placerat. </p>
            </div>

          </section>
          <section id="newsletter">
          <div class="container">
            *[![<h1> Subscribe to the newsletter </h1>][1]][1]*
            <form>
                <input type="text" name="email"></input>
                <button type="submit" name="subscribe">SUBSCRIBE</button>
            <form>
          </div>
          </section>

           <footer>
           </footer>
    </body>

</html>

3 个答案:

答案 0 :(得分:1)

更改RewriteRule ^([\w-]+/)?$ /$1?s=%1 [NE,R,L] 元素以显示为-,而不是h1。具有垂直填充的内联元素的行为不符合您的预期:

inline-block

答案 1 :(得分:0)

我不能真正为您提供默认答案,但是可以尝试.container h1 {}或尝试放入jsfiddle或Codepen

答案 2 :(得分:0)

您在前面的一行中有一个错字:

 #newsletter h1{
    display:inline;
    margin:0px: /* replace : with ; */
    padding:20px; 
 }