Home  >  Article  >  Web Front-end  >  About typesetting problems caused by spaces in html_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 11:45:561053browse

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

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 18bb6ffaf0152bbe49cd8a3620346341 and "2e1cf0710519d5598b1f0f14c36ba674Number of lines:8c1ecd4bb896b2264e0711597d40766c" 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 "18bb6ffaf0152bbe49cd8a3620346341" and the label "2e1cf0710519d5598b1f0f14c36ba674".

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn