удалить дополнительное пространство между tab и line

Question

Я хочу удалить пробел между вкладкой и горизонтальной линией. Найдите скрипку http://jsfiddle.net/yy1t6w1f/. Пример кода для создания горизонтальной линии:

div.hr { 
background: #fff no-repeat scroll center; 
margin-left: 15em; 
margin-right: 15em; 
width:50em; 
height:.05em; 
} 

div.hr hr { 
display: none; 
} 

Вкладка создано должны касаться горизонтальной линии, и их не должна быть пробела между вкладкой и div.Thanks.

Answer 1

Добавление

hr { margin: 0; } 

будет делать трюк. Тег hr в HTML имеет поля по умолчанию, которые вызывают это пространство между этими двумя элементами. Обратите внимание, что приведенный выше код удалит все поля. Если вы хотите, чтобы верхний край был удален, вы можете использовать margin-top вместо margin.

Фактически, в вашем случае вам не обязательно использовать тег hr; Вы можете удалить его и просто добавить:

border-bottom: 1px solid #888888; 

к вашему селектору .tabDiv CSS; что также должно служить вашей цели здесь.

Answer 2

table, table td { 
    border-spacing: 0px; 
    padding: 0px; 
} 

hr { margin: 0; } 

http://jsfiddle.net/yy1t6w1f/6/

Answer 3

Если я не понимаю, что вы строите, есть намного лучший способ написать это.

Смотрите ниже:

nav a { 
 
    display: inline-block; 
 
    background-color: #efefef; 
 
    border: 1px solid #888; 
 
    border-top: 2px solid #888; 
 
    border-top-left-radius: 10px 5px; 
 
    
 
    min-width: 96px; 
 
    padding: 0 4px; 
 
    text-align: center; 
 
    
 
    font: 18px impact; 
 
    letter-spacing: 2px; 
 
    color: #3B0B17; 
 
    text-transform: uppercase; 
 
    text-decoration: none; 
 
}

<nav> 
 
    <a href="">FirstTab</a> 
 
    <a href="">SecondTab</a> 
 
    <a href="">ThirdTab</a> 
 
</nav>