How can I eliminate the margin at the top and bottom of a container

Question

Am developing a WordPress site using the underscores theme and I just added a widget with contact info to my site with the following code:

<div class="topheader">
   <div class="info">
      <?php if( is_active_sidebar( 'info' ) ) : ?>          
          <?php dynamic_sidebar( 'info' ); ?>
       <?php endif; ?>
   </div>
 </div>

CSS:

.topheader {
    background-color:#e6e6e6;
}
.info {
    max-width: 1280px;
}

The info is the first thing that I on the page. But I see that there is a space at the top and at the bottom where my slider is located.

How can I eliminate the existing margin that I see before and after the heading?

Cause at the moment I gap, then the widget, and after the widget there is another gap and only then the slider. I am tried to setting the header margin to 0px, but it didn't really work.

Here a screenshot

Answer 1

How can I eliminate the existing margin that I see before and after the heading?

By heading do you mean an H3 tag by any chance? These are default in sidebars. You should just set margin-top:0 on the H3 tags in your sidebars, to get rid of any margin pushing your sidebar down.

To counter act this, I would then add some margin-bottom to the widget block to space them out a bit.

I think that's what you mean.. but it's hard to understand without any visual representation of what your problem is.

Answer 2

You have to set the start values in css like this:

body, html {
  margin: 0;
  padding: 0;
}

Otherwise please copy the whole Code of the page here. Open it in your browser, open the site Code and copy all.

Answer 3

Just inspect the element and test whats causing the margin. You can try this code. This might help. But not sure because your question is not clear enough to know your code.

*{
margin: 0;
padding: 0;
}
.top-header, .info {
margin: 0;
padding: 0;
}