Home > Web Front-end > HTML Tutorial > How do you say it? It should be said that it is a style problem. Thank you for your help_html/css_WEB-ITnose

How do you say it? It should be said that it is a style problem. Thank you for your help_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:47:50
Original
900 people have browsed it

body{	font-family: "宋体", Verdana, Arial;	font-size: 12px;	margin: 0px;	background: #CED7F7;}.table_border{	border:solid 1px #C4CCD6;	background-color:#FFFFFF;}th{		font-weight:bold;	font:12px;	background-image:url(admin_bg_1.gif);	background-repeat:repeat-x;	color:white;	background-color:4455AA;	height:25px;}td{	font:"宋体" 12px;	line-height: 20px;	line-height: 150%;	table-layout: fixed;}input{	border:#7F9DB9 solid 1px;	background: #FFF;	font-size:12px;}span.tip{	font-size:12px;	position:static;}
Copy after login

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title><link rel="stylesheet" type="text/css" href="style.css"><script src="jquery-1.7.2.js" type="text/javascript"></script><style type="text/css">.even{	background-color:#E4EDF9;}.odd{	background-color:#FFFFFF;}</style><script type="text/javascript">$(document).ready(function(){ //隔行表色 $("tr:even").addClass("even"); $("tr:odd").addClass("odd");   });</script><body>	<form id="form1" runat="server">    <table align="center" cellpadding="1" cellspacing="1" class="table_border" width="98%">        <tr height="22" align="center">            <td align="left" class="forumRow" width="40%">                当前位置:设置            </td>        </tr>    </table>		<br />	<table width="98%" border="0" cellpadding="5" cellspacing="0" align="center" class="table_border">		<tr>			<th colspan="2" valign="middle">设置</th>		</tr>		<tr>			<td align="right" width="40%">文件名称:</td>			<td align="left" width="60%"><input type="text"></td>		</tr>		<tr>			<td align="right" width="40%">文件路径:</td>			<td align="left" width="60%"><input type="text"></td>		</tr>				<tr>			<td align="right" width="40%">图片路径:</td>			<td align="left" width="60%"><input type="text"></td>		</tr>	</table>	</form></body></html>
Copy after login


The background image is high enough

I just want to know where the extra 10 comes from
I can’t find the problem.



Reply to the discussion (solution)

It should be the reason for the browser’s default padding and margin.
You did not reset the stylesheet initially.
tr, th{
margin: 0;
padding: 0;
}
In addition, for front-end style debugging, it is inevitable to use tools such as firebug, so get familiar with it.

It should be the default padding and margin of the browser.
You did not reset the stylesheet initially.
tr, th{
margin: 0;
padding: 0;
}
In addition, for front-end style debugging, it is inevitable to use tools such as firebug, so get familiar with it.


I have never used tools like firebug for this~ Are there other tools?
And why not add
tr, th{
margin: 0;
padding: 0;
}
Isn’t the default 0?

The th element defaults to padding:5px;
You can reset it
th
{
font- weight:bold;
font:12px;
background-image:url(admin_bg_1.gif);
background-repeat:repeat-x;
color:white;
background-color: 4455AA;
height:25px;
padding: 0px;
}

Got it~ Got it

source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template