CSS issue with an image

HTML & CSS
1

I have a little space which is not needed between the header and showcase area.
Screenshot:

Screenshot_1
Screenshot_11365×344 65.9 KB

HTML and CSS:
(link to codepen: https://codepen.io/webdevnoob010/pen/rZpgLZ
I am not sure of the images will be displayed on codepen)

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="author" content="">
    <title>Acme Website Design | Welcome</title>
    <link rel="stylesheet" type="text/css" href="Website3.css">
    <style>
    body{
      font: 15px/1.5 arial,helvetica,sans-serif;
      background: #f4f4f4;
      margin:0;
      padding: 0;
    }
    /*global*/
    .container{
      width: 80%;
      margin:0 auto;
    }

    ul{
     margin:0;
     padding: 0;
    }

    /*header*/
    header{
      background: #35424a;
      color: #ffffff;
      padding-top:30px;
      min-height: 70px;
      border-bottom: #e8491d 3px solid;
      margin: 0;
    }

    header a{
      color:#fff;
      text-decoration: none;
      text-transform: uppercase;
      font-size:16px;
    }

    header li{
      float: left;
      list-style: none;
      display: inline;
      padding: 0px 20px 0px 20px;
    }

    #branding{
      float:left;
    }

    #branding h1{
      margin: 0;
    }

    header nav{
      float: right;
      margin-top:10px;
    }

    header .highlight, header .current a{
      color: #e8491d;
      font-weight: bold;
    }

    header a:hover{
      color: #ccc;
    }
    /* showcase */
    #showcase{
      min-height: 400px;
      background: url('showcase.jpg') no-repeat ;
      margin: 0;
      padding: 0;
    }
    </style>

  </head>
  <body>
    <header>
      <div class="container">

        <div id="branding">
          <h1><span class="highlight">Acme</span> Web Design</h1>
        </div>

        <nav>
          <ul>
            <li class="current"><a href="Website3.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="services.html">Services</a></li>
          </ul>
        </nav>
      </div>
    </header>

    <section id="showcase">
      <div class="container">
        <h1>Affordable and Professional webdesign</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
      </div>
    </section>

    <section id="newsletter">
      <div class="container">
        <h1>Subscribe To Our Newsletter</h1>
        <form>
          <input type="email" placeholder="Enter Email">
          <button type="submit" class="button_1">Subscribe</button>
        </form>
      </div>
    </section>

    <section id="boxes">
      <div class="container">

        <div class="box">
          <img src="logo_html.png">
          <h3>HTML 5 Markup</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>

        <div class="box">
          <img src="logo_css.png">
          <h3>CSS 3 styling</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>

        <div class="box">
          <img src="logo_brush.png">
          <h3>Designing</h3>
          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
      </div>
    </section>

    <footer>
      <p>Acme Web Design Copyright &copy; 2018</p>
    </footer>

  </body>
</html>

Thanks!

3

Hi there akhillav,

this…

.container  {
    padding-top: 1px;
 }

…will contain the h1 element’s top margin, and in doing so,
remove the unwanted white space. :winky:

coothead

4

It worked treat! Thanks a lot!
But can you please explain how adding
padding-top:1px;
to the container can solve the issue?

5

Hi there akhillav,

someone more erudite than me will be able to
explain the precise reasons for this behaviour. :winky:

All I know, is how to prevent it and some possible
solutions come to mind…

  1. setting a border to the parent element.
  2. setting padding to the parent element.
  3. setting overflow: hidden to the parent element.
  4. replacing the margin values of the child element
    with padding values.

coothead

6

Margins collapse unless there is something solid in the way like padding, border or content. Adding padding stops the margins collapsing through. There are certain contexts where margins don’t collapse such as floats, absolute elements and block formatting contexts.

Read the following thoroughly to completely understand the behavior or it will trip you up time and time again :slight_smile:

4 Likes
7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.