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