Question

为什么页眉顶部和文章“Profuture”之间的距离是29像素而不是20像素？

为什么页面顶部与sub_header类中的文本“可能的未来”之间的距离为21像素而不是20像素？

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;
    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 &copy; 2008</strong> <a href="#">Profuture.com</a>
    </div>
</div>
</body>
</html>

Answer 1

我的猜测是#header的大字体大小。您可以尝试调整行高以弥补这一点。

Answer 2

Web Developer Toolbar和/或Firebug是解决此类问题的无价工具。在Web Developer中，使用“CSS”＆gt; “显示样式信息”。在Firebug中，右键单击元素，然后单击“检查元素”。

Answer 3

您应该调整相关文字元素的line-height。

内联元素（例如文本和示例中的<a>）实际上位于“框”中。这些内联框的边缘与文本之间的距离由font-size决定，不实际字形本身的大小。不同的浏览器以不同的方式呈现默认的行高（这可能因字体而异）。通常它是字体大小的1.2倍，这意味着您可以设置line-height: 1;从而解决问题。在您的情况下，标题中的文本看起来line-height: 0.7;解决了那里的问题。但是，您必须在需要的地方进行计算。

不需要的距离

3 个答案: