How can I remove the spacing above a block element in CSS?


Tags: css,html5,css3

Problem :

I am designing a website and I have come across a problem that I cannot seem to fix. The layout of my page is completely designed by HTML DIVs and certain elements are nested in relative position to their parent DIV. I am trying to position a banner-wrap DIV underneath the DIV which holds my navigation menu without having any space between it, but I cannot figure out how to remove the space.

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>

<body>
    <body class='landing-page wsite-theme-light'>
        <div id="nav-mast">
            <div class="container">
            <table>
                    <tr>
                    <td id="logo">{logo}</td>
                    <td id="nav">{menu}</td>
                    </tr>
            </table><!-- end navigation table -->
        </div><!-- end nav bar contanier -->
    </div><!-- end navigation mast -->
    <div id="landing-wrap">
        <div class="container">     
        <div id="banner">
            <div class="wsite-header"></div>
        </div><!-- end banner -->
            <div id="banner-social-screen">
                <h3>Contact</h3>
                {social}
        </div><!-- end banner social screen -->
        <div id="banner-screen">
            <div class="banner-screen-inner">
                <div class="banner-screen-content">
                    <h2>{headline:text global="false"}</h2>
                    <p>{headline-paragraph:text global="false"}</p>
                    <div id="landing-button">{action:button global="false"}</div>
                </div><!-- end banner screen content -->
            </div><!-- end inner banner screen -->
        </div><!-- end banner screen -->
        </div><!-- end landing container -->
    </div><!-- end landing wrap -->

The navigation bar is the nav-mast div and the space is being created between the nav-mast DIV and the landing-wrap DIV. The landing-wrap DIV holds a header image with two semi-transparent elements which are held in the banner-screen and banner-screen-social DIVs. The banner-screen-social DIV has an h3 text element and the social icons for my website. The banner-screen DIV has an h2 text element that holds my landing page headline and a p text element that holds the paragraph-headline. I want both the banner-screen-social and banner-screen elements to appear on top of the image (as they do), but my issue is that there is now a spacing between the bottom of the nav-mast element and the top of the landing-wrap element.

This is my current CSS which results in a space (image in link):

.landing-page #banner-screen {
    position: relative;
    display: block;
    vertical-align: middle;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    height: auto;
    background: rgba(176, 176, 176, 0.70);
}

.landing-page #landing-wrap {
    background-image: url(banner-tall.jpg);
    height: 500px;
    margin-bottom: 30px;
    margin-top: 0px;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100%;
    background-size: cover;
-webkit-box-shadow: 7px 7px 22px 0px rgba(50, 50, 50, 0.7);
-moz-box-shadow:    7px 7px 22px 0px rgba(50, 50, 50, 0.7);
box-shadow:         7px 7px 22px 0px rgba(50, 50, 50, 0.7);
-webkit-box-shadow: -7px 7px 22px 0px rgba(50, 50, 50, 0.7);
-moz-box-shadow:    -7px 7px 22px 0px rgba(50, 50, 50, 0.7);
box-shadow:         -7px 7px 22px 0px rgba(50, 50, 50, 0.7);
}

.landing-page .banner-screen-content h2 {
    top: 15px;
    left: 10px;
    font-family: 'Sansation', sans-serif;
    font-size: 24px;
    line-height: 10px;
    text-align: center;
    position: relative;
}

.landing-page .banner-screen-content p {
    font-family: 'Playfair Display', serif;
    font-size: 14px;
    top: 0px;
    line-height: 14px;
    left: 10px;
    text-align: left;
    position: relative;
    word-wrap: normal;
}

.landing-page #banner-social-screen {
    position: relative;
    display: block;
    vertical-align: middle;
    margin-left: auto;
    margin-right: 0%;
    margin-top: 0%;
    width: 20%;
    height: auto;
    background: rgba(176, 176, 176, 0.70);
}

.landing-page #banner-social-screen h3 {
top: 5px;
    left: 3px;
    font-family: 'Sansation', sans-serif;
    font-size: 18px;
    line-height: 8px;
    text-align: center;
    position: relative;
}

This is what my CSS was before the space occurred (image in link):

.landing-page #banner-screen {
    position: relative;
    display: block;
    vertical-align: middle;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    height: auto;
    background: rgba(176, 176, 176, 0.70);
}

.landing-page #landing-wrap {
    background-image: url(banner-tall.jpg);
    height: 500px;
    margin-bottom: 30px;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100%;
    background-size: cover;
-webkit-box-shadow: 7px 7px 22px 0px rgba(50, 50, 50, 0.7);
-moz-box-shadow:    7px 7px 22px 0px rgba(50, 50, 50, 0.7);
box-shadow:         7px 7px 22px 0px rgba(50, 50, 50, 0.7);
-webkit-box-shadow: -7px 7px 22px 0px rgba(50, 50, 50, 0.7);
-moz-box-shadow:    -7px 7px 22px 0px rgba(50, 50, 50, 0.7);
box-shadow:         -7px 7px 22px 0px rgba(50, 50, 50, 0.7);
}

.landing-page .banner-screen-content h2 {
    top: 15px;
    left: 10px;
    font-family: 'Sansation', sans-serif;
    font-size: 24px;
    line-height: 10px;
    text-align: center;
    position: relative;
}

.landing-page .banner-screen-content p {
    font-family: 'Playfair Display', serif;
    font-size: 14px;
    top: 0px;
    line-height: 14px;
    left: 10px;
    text-align: left;
    position: relative;
    word-wrap: normal;
}

.landing-page #banner-social-screen {
    text-align: right;
    display: inline-block;
    height: auto;
    width: auto;
    margin-bottom: 0px;
    margin-right: 0px;
    background: rgba(176, 176, 176, 0.70);
    position: relative;
}

.landing-page #banner-social-screen h3 {
top: 5px;
    left: 3px;
    font-family: 'Sansation', sans-serif;
    font-size: 18px;
    line-height: 8px;
    text-align: center;
    position: relative;
}

The issue with that being that I could not properly position the banner-social-screen element when it was displayed as an inline-block.

Is there any way to remove the space between the nav-mast and landing-wrap elements without removing the banner-screen and banner-screen-social blocks from my page?



Solution :

You could try using the position: absolute; attribute in CSS. You would mostlikely need to use this for both the nav-mast and landing-wrap. If the divs still should the unwanted gap try top:0px;. If the gap is still present then try using a negative top:-15px;. You may be able to do this without the position attribute but I tend to use it more often than not.


    CSS Howto..

    How do i split user inputed text into individual characters?

    how to access the styles from CSS

    How to edit CSS class via jQuery if statement

    CSS page headers - how to use print margins?

    how to “replace” css Properties with jQuery

    How to add different CSS to the same HTML tags?

    How to stop a timeOut animation that contains multiple timeOut animations within

    Using CSS to show gradient as well as an image

    Node/Grunt - Autoprefixer - How to add configuration to my Gruntfile.js & how to check supported browsers?

    How can I debug twitter bootstrap v4-alpha grid? col-sm-offset-* not working

    Single
    with Box-Shadow = 6 cicles. How it works?

    How to add an anchor tag to a block of html?

    CSS - How to have 100% height element inside of parent

    How to Write CSS Code for Mozilla Firefox Browser

    How to hide

    How to remove space between bootstrap columns?

    How to organize user's shares to easily add comments to that particular post?

    How to make a circle breadcrumb with only css

    How to create a completely flexible piano keyboard with HTML and CSS

    How do I reference a javascript variable from a razor section?

    CSS - How to remove 2nd vertical scroll bar without changing anything else?

    How to put a
  • over an
    • Weird CSS effect with box shadows - how to solve?

      jQuery Show/Hide - CSS display values are affecting my layout

      How to not lose the css while appending html to an element?

      How to make CSS for HTML5
      work properly in IE?

      How to transform Menu icon to Arrow icon? [closed]

      How to unbind() a hover/ mouseover event?

      How to make the effects of jQuery's $(element).css() persistent?

      How to keep styles after animation?