unwanted distances
Why is the distance between the top of the page and the text "Profuture" in the header class 29 pixels instead of 20 pixels?
Why is the distance between the top of the page and the text "Probable Future" in the sub_header class 21 pixels instead of 20 pixels?
Why is the distance between the bottom of the page and the text "Copyright © 2008 Profuture.com" in the footer class 24 pixels instead of 20 pixels?
test.css:
body
{
background-color: #CACACA;
font-family: "Trebuchet MS", Verdana, serif;
margin: 0;
padding: 0;
}
a
{
color: #424242;
font-weight: bold;
text-decoration: underline;
}
a:hover
{
color: #424242;
font-weight: bold;
}
a.menu_link
{
color: #424242;
font-weight: bold;
}
a.menu_link:hover
{
color: #424242;
font-weight: bold;
}
#header a
{
color: #A40008;
font-size: 28px;
font-weight: bold;
}
#sub_header a
{
color: #424242;
font-size: 22px;
font-weight: bold;
}
#container
{
margin: 0 auto 0 auto;
padding: 0 auto 0 auto;
width: 750px;
}
#header
{
margin: 20px 0 0 0;
padding: 0;
}
#sub_header
{
margin: 0 0 20px 0px;
padding: 0;
text-align: right;
}
#footer
{
font-size: 12px;
margin: 20px 0 0 0;
text-align: center;
}
#main
{
background-color: #FFFFFF;
margin: 0;
padding: 0;
width: 100%;
}
#main_top
{
background-color: #FFFFFF;
height: 20px;
}
#main_bottom
{
background-color: #FFFFFF;
height: 20px;
}
.content
{
float: left;
font-size: 12px;
margin: 0px;
padding: 0 20px 0 20px;
开发者_StackOverflow社区 text-align: justify;
width: 510px;
}
.content_top
{
color: #A40008;
font-size: 18px;
font-weight: bold;
}
.content_bottom
{
font-size: 12px;
font-weight: bold;
}
.menu
{
border-left: #8C8484 1px solid;
float: right;
font-size: 12px;
margin: 0px;
padding: 0 20px 0 20px;
width: 139px;
}
.menu_top
{
color: #A40008;
font-size: 18px;
font-weight: bold;
}
.menu ul
{
margin: 0;
padding-left: 20px;
}
.menu li
{
list-style-type: circle;
}
label
{
display: block;
font-size: 14px;
margin: 0;
padding-right: 20px;
}
#clear
{
clear: both;
display: block;
height: 1px;
overflow: hidden;
width: 100%;
}
test.html:
<!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=utf-8" />
<title>
ProFuture
</title>
<link rel="stylesheet" type="text/css" href="test.css" /></head>
<body>
<div id="container">
<div id="header">
<a href="link1">ProFuture</a>
</div>
<div id="sub_header">
<a href="link1">Probable Future</a>
</div>
<div id="main_top">
</div>
<div id="main">
<div class="content">
<div class="content_top">
Page
</div>
<div class="content_bottom">
<a href="http://www.test.com/">http://www.test.com/</a>
</div>
<div class="content_top">
Interpretation
</div>
<div class="content_bottom">
testtesttest
testtesttest
testtesttest
</div>
<div class="content_top">
Author
</div>
<div class="content_bottom">
tes...@test.com
</div>
<br>
</div>
<div class="menu">
<div class="menu_top">Account</div>
<br>
<ul>
<li><a href="create">Create</a></li><li><a href="read">Read</a></li><li><a href="login">Log In</a></li><li><a href="logout">Log Out</a></li><li><a href="update">Update</a></li><li><a href="delete">Delete</a></li> </ul>
<br>
<div class="menu_top">Statistic</div>
<br>
<ul>
<li><a href="create">Create</a></li><li><a href="read">Read</a></li> </ul>
</div>
<div id="clear"></div>
</div>
<div id="main_bottom">
</div>
<div id="footer"><strong>Copyright © 2008</strong> <a href="#">Profuture.com</a>
</div>
</div>
</body>
</html>
My guess would be the large font-size of #header. You might try adjusting line-height to compensate for that.
You should adjust the line-height on the text elements in question.
Inline elements, such as text and the <a> in your example, are actually in "boxes". The distance between the edge of these inline boxes and the text is determined by the font-size, which is not the size of an actual glyph per se. Different browsers render default line-height differently (and this can differ per font). Usually it's 1.2x the font-size, which means that you would be able to set line-height: 1; and thereby solve the problem. In your case, it looks like line-height: 0.7; on the text in the header solves the problem there. However, you'll have to calculate this wherever you need to be that exact.
The Web Developer Toolbar and/or Firebug are priceless tools to sort out that kind of problem. In Web Developer, use "CSS" > "Show style information". In Firebug, right click the element and click "inspect element".
加载中,请稍侯......
精彩评论