我正在设计一个网站，但遇到了一个似乎无法解决的问题。我的页面布局完全由 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 元素显示为内联 block 时，我无法正确定位它。
有没有什么方法可以在不从我的页面中删除 banner-screen 和 banner-screen-social block 的情况下删除 nav-mast 和 landing-wrap 元素之间的空间？
最佳答案
你可以尝试使用 position: absolute; CSS 中的属性。您很可能需要将其用于导航桅杆和着陆环绕。如果 div 仍然应该有不需要的间隙，请尝试 top:0px;。如果间隙仍然存在，则尝试使用负 top:-15px;。您可以在没有 position 属性的情况下执行此操作，但我倾向于更频繁地使用它。
关于html - 如何删除 CSS 中 block 元素上方的间距？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23815114/