Question

我搜索了谷歌，但我没有找到任何东西。我搜索了这个网站，发现这个主题Unwanted space between divs看似相似，我试图申请

margin:0px;

有几个地方，但我仍有两个div之间的空间。

继承我的HTML

 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>title/title>
<link rel="stylesheet" type="text/css" href="e.css">
</head>


<body>

<div id="page">

    <div id="content">
        <div id="up">
            <div id="tab">
                  <ul id="tabmenu">
                <li id="anm" class="tbs blue"><a href="#"><span>Anm</span></a></li>
                <li id="kom" class="tbs blue"><a href="#"><span>Kom</span></a></li>

                <li id="omt" class="tbs blue"><a href="#"><span>Omt</span></a></li>
                <li id="sts" class="tbs blue"><a href="#"><span>Sts</span></a></li>
              </ul>
        </div>

        <div id="usrp">
            <div id="usr">
            </div>
        </div>
    </div>

    </div>

    <div id="bottom">

    </div>
</div>
</body>
</html>

和我的Css

html {
    height: 98%;
}

body {
    height:99%;
}

#page {
    height:99%;
}

#content {
    /*border:2px solid blue;*/

}

#bottom {
    border:2px solid green;
    height:15%;
    vertical-align: bottom;
}

#up {
      /*border:dotted green 2px;*/
      width:59%;
}

.usrcom {
    border-bottom: 2px dotted blue;
    margin-left:15px;
    margin-right:15px;
}

#usrp {
    width:100%;
    clear:both;
    border-right: 2px solid blue;
    border-left: 2px solid blue;

    border-bottom:2px solid blue;
    border:dotted yellow 2px;


}

/***Tabs menu*****/
#tabmenu {
  float:left;
  width:685px;
  /*background:#BBD9EE;*/
  /*background:#FF6633;*/
  font-size:93%;
  line-height:normal;
  margin-top: 0px;
  margin-left: 0px;

  /*border:dotted red 2px;*/
  border-bottom:2px solid blue;
  /*border:dotted red 2px;*/


}

#tabmenu ul {
  /*background:#BBD9EE;*/
  padding:0px 0px 0 0px;
  margin:0px;
  list-style:none;
  border:dotted green 2px;
}

#tabmenu li {
  display:inline;
  padding:0;
  margin:0px;
}

#tabmenu a {
  float:left;
  /*background:url("img/tableft2.png") no-repeat left top;*/
  margin:0;
  padding:0 0 0 4px;
  text-decoration:none;
}

#tabmenu a:hover span {
background-color:#3399FF;
margin:0px;
border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

#tabmenu a span {
  float:left;
  display:block;
  /*background:url("img/tabright2.png") no-repeat right top;*/
  padding:5px 15px 4px 5.5px;
  margin:0px;
  color:#FFFFFF;
  background-color:#0000FF;

  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
}

我可以找出空间发生的原因，我该如何解决这个不需要的空间。

编辑：

Ups，yearh，忘了告诉哪些div，

介于'Tabmenu'和'usrp'之间

编辑：

试图在我的CSS中申请

#tab {
    margin: 0px;
    padding:0px;

}

因为它实际上位于'tab'和'usrp'之间，但这没有任何帮助。

Answer 1

在CSS中：

#tabmenu {
  margin:0; 
}

应该做的伎俩

Answer 2

了解如何使用检查器并“检查此元素”。然后你可以将鼠标悬停在页面上的所有元素上，然后逐字地看到它们的边距/填充，以及CSS导致它们的原因。您甚至可以在应用它之前即时编辑CSS以测试修复。我的偏好是适用于Firefox的Firebug插件，但Chrome，Safari，甚至Internet Explorer都已经内置了它们。

摆脱2个div之间的不需要的空间

2 个答案: