Question

当我运行下面的代码并点击下拉菜单的Link1时，我在欢迎测试和下面的cnt3 div之间获得了空间。为什么空间？

＆＃13;

//index.jsp
 `   <%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    <style type="text/css">
           #left {
                float:left;
                width:10%;
                height: 100em;
                margin:1px .1em 1px 1px;
           }
            #center{
                   position: absolute;
                   width: 78%;
                   height: 100em;
                   margin: 1px .20em 132px 132px;
               }
               #cnt1{
                   position: static;
                   width:100%;
                   height: 12em;
                   background-color: yellowgreen;
               }
               #cnt2{
                   position: static;
                   width:100%;
                   height: 10em;
                   background-color: blanchedalmond;
               }
               #cnt3{
                   position: relative;
                   width:100%;
                   height: 10em;
                   background-color: lawngreen;
               }
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
    }
  li {
    float: left;    
    }
  li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

li.dropdown {
    position: static;
    display: inline;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

             #right {
                float:right;
                width: 10%;
                height: 100em;
                margin: 1px .1em 1px 1px;
               }
              
         </style>
    </head>
    <body>
        <div id="left"></div>
        <div id="right"></div>
        <div id="center">
            <div id="cnt1">
                <table align="left" width="1" cellspacing="1" cellpadding="1">
    <thead>
        <tr>
            <th><img src="Images/IMG_20140722_155322621.jpg" width="100" height="90" alt="IMG_20140722_155322621"/>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>A</td>
        </tr>
        <tr>
            <td>I</td>
        </tr>
        <tr>
            <td>N</td>
        </tr>
    </tbody>
                </table>
    <table align="right" width="1" cellspacing="1" cellpadding="1">
              <thead>
                  <tr>
                      <th><img src="Images/IMG_20140722_125957728_HDR.jpg" width="100" height="90" alt="IMG_20140722_125957728_HDR"/>
                      </th>
                  </tr>
                  </thead>
                  <tbody>
                  <tr>
                      <td>E</td>
                  </tr>
                      <tr>
                        <td>A</td>
                        <tr>
                            <td>E</td>
                        </tr>
                       </tbody>
    </table>
    <table align="center"  width="1" cellspacing="1" cellpadding="1" >
                    <br>
    <tbody>
        <tr>
            <td><img src="Images/IMG_20140722_130004711_HDR.jpg" width="100" height="100" alt="IMG_20140722_130004711_HDR"/>
            </td>
        </tr>
        <tr>
            <td>e</td>
        </tr>
    </tbody>
</table>
</div>
<div id="cnt2"><marquee><img src="Images/IMG_20140722_130004711_HDR.jpg" width="200px" height="150px" alt="IMG_20140722_130004711_HDR"/>
  <img src="Images/IMG_20140722_155322621.jpg" width="200px" height="150px" alt="IMG_20140722_155322621"/>
   </marquee>
      </div>
            <div id="cnt3" target="cnt3">
                <ul>
  <li><a class="active" href="index.jsp">Home</a></li>
  <li><a href="#news">News</a></li>
  <li class="dropdown">
    <a href="#" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
        <a class="active" href="Test1.jsp" target="self">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>
            </div>
        </div>
<br style="clear:both;" />
    </body>
</html>
`

＆＃13;

//Test1.jsp
 `   <%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@include file="index.jsp" %>
<!DOCTYPE html>
<html>
   <head>text</head>
<body>
    welcome to Test
</body>
</html>

＆＃13;

＆＃13; `

元素之间空间的原因

0 个答案: