如何摆脱div之间的空间[重复]
Posted
技术标签:
【中文标题】如何摆脱div之间的空间[重复]【英文标题】:How to get rid of the space between divs [duplicate] 【发布时间】:2016-02-05 07:30:37 【问题描述】:我的网页上在两个 div 之间有一条粗白线,每次我在第二个 div 中删除我的 <ul>
时,白线就会消失。如何删除白线并保留我的<ul>
?我尝试删除所有 CSS 元素,但没有成功。即使是空的<ul>
,空间也在那里......
.header
width: 100%;
height: 410px;
background-color: #040104;
text-align: center;
.nav
width: 100%;
height: 50px;
background-color: #040104;
font-family: sans-serif;
text-align: center;
.nav li
display: inline;
color: #ce5e27;
font-size: xx-large;
.nav ul li a
padding: 1em;
color: #ce5e27;
text-decoration: none;
.contentContainer
height: 600px;
background-color: #040104;
.content
width: 60%;
height: 200%;
float: left;
background-color: #040104;
text-align: center;
.content h1
font-family: sans-serif;
font-size: x-large;
color: #ce5e27;
.thumbnail
width: 40%;
height: 200%;
background-color: #040104;
float: right;
text-align: center;
.thumbnail h1
font-family: sans-serif;
font-size: large;
color: #ce5e27;
.footer
clear: both;
width: 100%;
height: 60px;
background-color: black;
font-family: sans-serif;
text-align: center;
.footer li
display: inline;
color: #ce5e27;
font-size: large;
.footer h1
color: #ce5e27;
font-size: small;
text-align: center;
font-family: sans-serif;
<div class="header">
<img src="images/basketball-rims-header.gif">
</div>
<div class="nav">
<ul>
<li> <a href="index.html">Home</a></li>
<li>|</li>
<li> <a href="http://www.nba.com/news/">News</a></li>
<li>|</li>
<li> <a href="http://stats.nba.com/players/?ls=iref:nba:gnav">Players</a></li>
<li>|</li>
<li> <a href="http://www.nba.com/teams/?ls=iref:nba:gnav">Teams</a></li>
<li>|</li>
</ul>
</div>
【问题讨论】:
使用浏览器控制台(通常是<F12>
)来识别应用于<div>
的样式。默认情况下,所有用户代理都有一个基本样式表。基本样式表完全有可能向所有 <div>
元素添加 margin
甚至可能是 padding
,因为它们是块元素。如果是这样,您将需要覆盖这些样式。更好的解决方案是使用 CSS 重置,它覆盖基本样式表并在浏览器中提供一致的初始外观。 Here 就是一个这样的重置示例...
【参考方案1】:
要摆脱白线,您可以将margin: 0
添加到您的ul
元素中。
演示:
.header
width: 100%;
height: 410px;
background-color: #040104;
text-align: center;
ul
margin: 0;
.nav
width: 100%;
height: 50px;
background-color: #040104;
font-family: sans-serif;
text-align: center;
.nav li
display: inline;
color: #ce5e27;
font-size: xx-large;
.nav ul li a
padding: 1em;
color: #ce5e27;
text-decoration: none;
.contentContainer
height: 600px;
background-color: #040104;
.content
width: 60%;
height: 200%;
float: left;
background-color: #040104;
text-align: center;
.content h1
font-family: sans-serif;
font-size: x-large;
color: #ce5e27;
.thumbnail
width: 40%;
height: 200%;
background-color: #040104;
float: right;
text-align: center;
.thumbnail h1
font-family: sans-serif;
font-size: large;
color: #ce5e27;
.footer
clear: both;
width: 100%;
height: 60px;
background-color: black;
font-family: sans-serif;
text-align: center;
.footer li
display: inline;
color: #ce5e27;
font-size: large;
.footer h1
color: #ce5e27;
font-size: small;
text-align: center;
font-family: sans-serif;
<div class="header">
<img src="images/basketball-rims-header.gif">
</div>
<div class="nav">
<ul>
<li> <a href="index.html">Home</a>
</li>
<li>|</li>
<li> <a href="http://www.nba.com/news/">News</a>
</li>
<li>|</li>
<li> <a href="http://stats.nba.com/players/?ls=iref:nba:gnav">Players</a>
</li>
<li>|</li>
<li> <a href="http://www.nba.com/teams/?ls=iref:nba:gnav">Teams</a>
</li>
<li>|</li>
</ul>
</div>
【讨论】:
【参考方案2】:您的<ul>
自动带有边距。将边距设置为 0:
.nav ul
margin-top: 0px;
【讨论】:
以上是关于如何摆脱div之间的空间[重复]的主要内容,如果未能解决你的问题,请参考以下文章