Помогите с отступом, пожалуйста

Общее
1

Здравствуйте, подскажите пожалуйста, почему в ссылках появляется лишний отступ в несколько пикселей справа перед рамкой? Скриншот прилагаю.

screenshot.png1366×768 38.9 KB 

<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Font Found | Типографика и каллиграфия</title>
  <meta name="keywords" content="шрифты, каллиграфия, буквы, история шрифтов, письменность">
  <meta name="description" content="История развития письменности, шрифтов и типографики">
  <link rel="stylesheet" href="style_main.css" type="text/css">
  <link rel="shortcut icon" href="fav.ico" type="image/x-icon">
 </head>
 <body bgcolor="#c0c0c0">
     <div class="header">
         <div class="lefthead">
         Левая отбивка
         </div>
         <div class="logohead">
             <a href="index.html"><img src="logo.png" alt="Логотип сайта" width="80px" height="80px" border="0px"></a> 
         </div>
         <div class="centerhead">
             <a href="index.html" class="headlink"> 
             Письменность             
             </a>
             <a href="index.html" class="headlink"> 
             Письменность             
             </a>
             SOME TEXT
             
         </div>
         <div class="righthead">
         Правая отбивка
         </div>
     </div>
 </body>
</html>

body {
margin:0px;
padding:0px;
}

.header {
background-color:#242424;
font-family:DejaVu Sans Mono;
font-size:10pt;
color:antiquewhite;
width:100%;
letter-spacing:2px;
height:80px;
text-transform:uppercase;
vertical-align: middle;
}

.lefthead {
width:20%;
height:80px;
border:0x;
float:left;
}

.logohead {
background-color: cornflowerblue;
height:80px;
width:80px;
float:left;
}

.centerhead {
width:520px;
height:80px;
float:left;
padding:30px;
}

.righthead {
width:20%;
height:80px;
float:right;
}

.headlink {
text-decoration: none; /* Подчеркивание у ссылок убираем /
color: antiquewhite; / Цвет текста /
border: 1px solid #ff5656;/ Рамка вокруг пунктов меню */
padding: 10px;
margin:25px;
}

2

Ссылки (тег a) по умолчанию являются строчными элементами. У них есть некоторые особенности поведения. При создании меню (я предполагаю, что это у вас меню) ссылкам задается блочно-строчный или блочный тип (в зависимости от того, горизонтальное или вертикальное меню). Тогда все отступы воспринимаются правильно.
Для этого используется свойство display. Подробнее о нем вы можете так же почитать на сайте htmlbook.ru. По скрину видно, что вы с ним уже знакомы.

1 лайк