Question

我正在设计一个网站，我遇到了一个我似乎无法解决的问题。我的页面布局完全由HTML 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 -->

导航栏是 nav-mast div，并且正在 nav-mast DIV和 landing-wrap 之间创建空间DIV。登陆 DIV包含两个半透明元素的标题图片，这些元素保存在 banner-screen 和 banner-screen-social 中资料核实。 banner-screen-social DIV有一个 h3文本元素以及我网站的社交图标。 横幅广告 DIV有一个 h2文本元素，用于保存我的着陆页标题和一个包含段落标题的 p文本元素。我希望 banner-screen-social 和 banner-screen 元素都显示在图像的顶部（就像它们一样），但我的问题是现在有一个 nav-mast 元素底部与 landing-wrap 元素顶部之间的间距。

这是我当前的CSS results in a space（链接中的图片）：

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

这就是我的CSS before the space occurred（链接中的图片）：

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

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

有没有办法在不从我的页面中删除横幅屏幕和横幅屏幕社交块的情况下删除nav-mast和landing-wrap元素之间的空间？

Answer 1

您可以尝试使用position：absolute; CSS中的属性。你最需要将它用于导航桅杆和着陆包装。如果div仍然应该是不需要的差距尝试顶部：0px;。如果差距仍然存在，那么尝试使用负顶部：-15px;。您可以在没有position属性的情况下执行此操作，但我倾向于更频繁地使用它。

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

1 个答案: