CODEWITHSUNDEEP
htmlcss
user1245524
user1245524

Reputation: 295

need padding-top for the h1 element

I need top padding for the element 'h1 Subscribe to the newsletter /h1', though I had put 20px of padding its not at all working please help , below is the code,

I need top padding for the element 'h1 Subscribe to the newsletter /h1', though I had put 20px of padding its not at all working please help , below is the code, Thanks in advance

<!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>

Upvotes: 0

Views: 610

Answers (3)

Danny
Danny

Reputation: 1113

Change the h1 element to display as inline-block, not inline. Inline elements with vertical padding do not behave as you might expect:

 #newsletter h1{
    display:inline-block;
    padding:20px; 
 }

Upvotes: 1

Diego Alfaro
Diego Alfaro

Reputation: 21

You have a typo in the line before:

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

Upvotes: 0

Blair
Blair

Reputation: 167

i cant really play around to get you defo answers but maybe try .container h1{} or try putting into jsfiddle or codepen

Upvotes: 0

Related Questions