如何摆脱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>

【问题讨论】:

使用浏览器控制台(通常是&lt;F12&gt;)来识别应用于&lt;div&gt; 的样式。默认情况下,所有用户代理都有一个基本样式表。基本样式表完全有可能向所有 &lt;div&gt; 元素添加 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】:

您的&lt;ul&gt; 自动带有边距。将边距设置为 0:

.nav ul
    margin-top: 0px;

【讨论】:

以上是关于如何摆脱div之间的空间[重复]的主要内容,如果未能解决你的问题,请参考以下文章

QT如何摆脱小部件与其父母之间的空间

摆脱跨度之间的空间

使用python如何摆脱从网站上抓取的文本中的尾随空格[重复]

如何摆脱包含 GridView 的空 div

摆脱python中的零[重复]

如何摆脱 UITableViewStyleGrouped 部分上方的额外空间?