【发布时间】：2014-07-11 23:31:29
【问题描述】：
我正在设计一个网站，但遇到了一个似乎无法解决的问题。我的页面布局完全由 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 -->
导航栏是 nav-mast div，并且正在 nav-mast DIV 和 landing-wrap 之间创建空间分区。 landing-wrap DIV 包含一个带有两个半透明元素的标题图像，这些元素分别保存在 banner-screen 和 banner-screen-social 中DIV。 banner-screen-social DIV 有一个 h3 文本元素 和我网站的社交图标。 banner-screen 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 元素显示为内联块时，我无法正确定位它。
有没有什么方法可以在不从我的页面中删除横幅屏幕和横幅屏幕社交块的情况下删除导航桅杆和着陆包裹元素之间的空间？
【问题讨论】：