关于html中空格导致的排版问题_html/css_WEB-ITnose-html教程-PHP中文网

关于html中空格导致的排版问题_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:45:56

原创

1137人浏览过

<!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。而上图为上述图片，为上述代码的效果图。发现在未对其格式进行特殊设置的时候，页面上下拉列表与“行数”之间就存在间隙。而我如果将与“行数: ”写在同一行且之间无空格，两者之间就不会再有间隙。

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

立即学习“前端免费学习笔记（深入）”；

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