关于html中空格导致的排版有关问题

关于html中空格导致的排版问题

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
   <head>
      <title>#{Security}</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge"/>


   <style type="text/css">
      html {
         height:100%;
         margin:0;
      }
      body {
         height:95%;
         margin:0;
         padding-top: 30px;
         padding-left: 60px;
      }
      select, input[type="text"] {
         height: 22px;
      }
      #lineNum {
         width: 60px;
      }
      .actionTable {
         width: 100%;
      }
      
   </style>
</head>

<body style="margin:0; -moz-user-select:-moz-none;" onselectstart="return $.Util.isSelected(event);" >
   <div style='width:850px;'>
      <table class="noBorderTable actionTable">
         <tr>
            <td>
               <label>文件:</label>
               <select id="file" name="file" style="width: 180px;">
                  #{files.options}
               </select>
               <label>行数:</label>
               <input id="lineNum" name="lineNum" type="text" value="500" style="width: 120px;" onkeyup='property(event, this);'/>
               <label id="errMsg" style="color: red;"></label>
               <input id="isAll" name="isAll" type="checkbox" onclick="checkAuditRefresh()" style="text-align:center; vertical-align:middle"/>
               <label>全部显示</label>
               <input id="refresh" name="auto-refresh" type="checkbox"  onclick="checkAuditRefresh()" style="text-align:center; vertical-align:middle"/>
               <label>自动刷新</label>
            </td>
            <td style="text-align: right;">
               <input type="button" id="rotate" value="分割文件"/>
               <input type="button" id="download" value="下载"/>
               <input type="button" id="gainLog" value="刷新"/>
            </td>
         </tr> 
      </table>
      <div style='width:400px;margin-top:5px;'>
      </div>
   </div>
</body></html>

页面效果

问题。

如上图，下拉列表的id为“file”，它与“行数”之间的间距为24px。而上图为上述图片，为上述代码的效果图。发现在未对其格式进行特殊设置的时候，页面上下拉列表与“行数”之间就存在间隙。而我如果将</select>与“<label>行数:</label> ”写在同一行且之间无空格，两者之间就不会再有间隙。

结论：它们之间的间隙是因为标签“</select>”与标签“<label>”之间的回车换行或空格导致的。

延伸：如果才能是这一区域内的空格或换行失去作用？

关于html中空格导致的排版有关问题

相关推荐