About typesetting problems caused by spaces in html_html/css

About typesetting problems caused by spaces in html_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:45:56

Original

1067 people have browsed it

<!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>

Copy after login

Page effect

Problem.

As shown above, the id of the drop-down list is "file", and the spacing between it and the "Number of Rows" is 24px. The picture above is the above picture, which is the rendering of the above code. It is found that when the format is not specially set, there is a gap between the drop-down list on the page and the "Number of Rows". And if I write and "Number of lines:" on the same line without spaces between them, there will be no gap between them.

Conclusion: The gap between them is caused by the carriage return, line feed or space between the label "" and the label "".

Extension: What if spaces or line breaks in this area have no effect?