0
Почему расстояние между верхней частью страницы и текстом «Profuture» в классе заголовка составляет 29 пикселей вместо 20 пикселей?нежелательные расстояния
Почему расстояние между верхней частью страницы и текстом «Вероятное будущее» в классе sub_header составляет 21 пиксель вместо 20 пикселей?
Почему расстояние между нижней частью страницы и текстом «Copyright © 2008 Profuture.com» в классе нижнего колонтитула 24 пикселя вместо 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">
[email protected]
</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>
Похоже, что это сработало с учетом быстрого теста в Chrome. У меня была такая же проблема, и я не знал об атрибуте line-height. – Jonesinator
Я также думаю, что этот ответ будет работать - дайте 'line-height: 20px' каждому из ваших якорных заголовков, а затем' line-height: 12px' в нижний колонтитул. Если это не так, добавьте 'height: 20px' и' height: 12px' в верхние и нижние колонтитулы соответственно. –
С 20-строчной высотой до заголовков и 12 строк с высотой до нижнего колонтитула первое расстояние становится 21, второе расстояние составляет 17 на Firefox и 20 на Chrome, а третье расстояние становится 21. –