Html 如何删除CSS中块元素上方的间距？_Html_Css

Html 如何删除CSS中块元素上方的间距？

html css

Html 如何删除CSS中块元素上方的间距？,html,css,Html,Css,我正在设计一个网站，我遇到了一个我似乎无法解决的问题。我的页面布局完全由HTML DIV设计，某些元素嵌套在相对于其父DIV的相对位置。我试图在DIV下面放置一个横幅换行DIV，该DIV保存着我的导航菜单，其间没有任何空间，但我不知道如何删除该空间 <!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8">

我正在设计一个网站，我遇到了一个我似乎无法解决的问题。我的页面布局完全由HTML DIV设计，某些元素嵌套在相对于其父DIV的相对位置。我试图在DIV下面放置一个横幅换行DIV，该DIV保存着我的导航菜单，其间没有任何空间，但我不知道如何删除该空间

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

这就是我的CSS（链接中的图像）：

问题是当banner social screen元素显示为内联块时，我无法正确定位它

有没有办法在不从我的页面中删除横幅屏幕和横幅屏幕社交块的情况下删除导航杆和着陆包裹元素之间的空间？

您可以尝试使用position:absolute；属性。您很可能需要将其用于导航桅杆和着陆包装。如果div仍应保留不需要的间隙，请尝试top:0px；。如果间隙仍然存在，则尝试使用负顶部：-15px；。您可能可以在不使用position属性的情况下执行此操作，但我倾向于更频繁地使用它

哇！非常感谢你！我只需将着陆包装放置在绝对位置即可工作；同时做着陆包裹和导航桅杆使整个导航栏消失。空间消失了，我的元素按照我希望的方式排列。再次感谢！没问题。找一些好的阅读材料，你很快就会成为一名职业选手！。当心。

.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;
}

.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;
}