В общем вот такая у меня шапка с навигацией.   Как видно пробелы между кнопками. Это таблица по сути, со столбцами. Вот код:  <table> <tr align="center"> <td width="173"></td> <td><a href="main.html" class="left">Главная<span>Главная</span></a></td> <td><a href="work.html" class="center">Наши работы<span>Наши работы</span></a></td> <td><a href="materialsandcolors.html" class="center">Материалы и цвета<span>Материалы и цвета</span></a></td> <td><a href="contacts.html" class="center">Контакты<span>Контакты</span></a></td> <td><a href="services.html" class="center">Наши услуги<span>Наши услуги</span></a></td> <td><a href="plotter.html" class="right">Плоттерная резка<span>Плоттерная резка</span></a></td> <td width="168"></td> </tr> </table> А вот стили, которые применяются к таблице, ну и вообще ко всему сайту:     body {    background-image: url(carbon.jpg);    background-attachment: fixed;    background-size: cover;    }  }    #leftbar {    float: left;     width: 167px;     height: 100%;     background: white;    border-radius: 5px; }  table {    border-style: none;    border-collapse: collapse; }    #content {    padding: 5px 40px;    width: 900px;    margin-left: 137px;    height: 100%;    background: white;    border-radius: 5px;    position: relative; }    #top {    width: 970px;    bottom: 0px;    left: 0px;    right: 0px;    position: absolute;    background: #cccccc;    border-radius: 0px 0px 5px 5px;    padding: 5px; }    h1 {    font-family: Tahoma;    font-size: 16pt; }    h2 {    font-family: Tahoma;    font-size: 14pt; }    p {    font-family: Tahoma;    font-size: 12pt; }    td.strela:hover {    background: url(strela.png); }    td.strela {    background: white; }  .left {    display: inline-block;    position: relative;    width: 150px;    height: 40px;    background: transparent url(knopkaleft.png) no-repeat;    font-family: tahoma;    font-size: 12pt;    padding-top: 7px;  } .left span {    position: absolute;    top: 0; left: 0; bottom: 0; right: 0;    background: transparent url(knopkaleft.png) no-repeat;    background-position: -150px 0;    opacity: 0;    width: 150px;    -webkit-transition: opacity 0.5s;    -moz-transition: opacity 0.5s;    -o-transition: opacity 0.5s;    padding-top: 7px; }     .left:hover span {    opacity: 1; }    .center {    display: inline-block;    position: relative;    width: 150px;    height: 40px;    background: transparent url(knopkacenter.png) no-repeat;    background-size: auto;    font-family: tahoma;    font-size: 12pt;    padding-top: 7px; }    .center span {    position: absolute;    top: 0; left: 0; bottom: 0; right: 0;    background: transparent url(knopkacenter.png) no-repeat;    background-position: -150px 0;    opacity: 0;    width: 150px;    -webkit-transition: opacity 0.5s;    -moz-transition: opacity 0.5s;    -o-transition: opacity 0.5s;    padding-top: 7px; }     .center:hover span {    opacity: 1; }    .right {    display: inline-block;    position: relative;    width: 150px;    height: 40px;    background: transparent url(knopkaright.png) no-repeat;    font-family: tahoma;    font-size: 12pt;    padding-top: 7px; }    .right span {    position: absolute;    top: 0; left: 0; bottom: 0; right: 0;    background: transparent url(knopkaright.png) no-repeat;    background-position: -150px 0;    opacity: 0;    width: 150px;    -webkit-transition: opacity 0.5s;    -moz-transition: opacity 0.5s;    -o-transition: opacity 0.5s;    padding-top: 7px; }     .right:hover span {    opacity: 1; }    a {      text-decoration: none;     }    a:hover {      text-decoration: none;  } В общем пробовал много, ничего не помогает (border-style, collapse, spacing). Прошу помочь, а то сам не догоняю .