Сокращение пробела между заголовком и описанием в результатах поиска

Question

Я создал страницу поиска для сайта, на котором отображается название и описание. Между заголовком и описанием есть много места.

Вот пример кода для отображения результатов

echo "<div class=\"main\"><ul><li><h3><a href='$link' style='text-decoration: none'><b>$title</b></a></h3>$description </div></li></ul>"; 

Eventhough нет «уш» тег между заголовком и описанием есть много пространства между ними. Как избавиться от этого пространства. Не могли бы вы рассказать мне об этом. Здесь работает функция высоты линии?

Вот код CSS

.main { 
position:relative; 
font-size:1.01vw; 
color:Black; 
font-family: Helvetica; 
top:3.5vw; 
left:26vw; 
} 

Благодарности

Answer 1

Если вы внимательно посмотрите на HTML вы закрывающего DIV перед тем </li></ul> здесь в конце </div></li></ul>

echo "<div class=\"main\"><ul><li><h3><a href='$link' style='text-decoration: none'><b>$title</b></a></h3>$description </div></li></ul>"; 

должен быть </li></ul></div>

echo "<div class=\"main\"><ul><li><h3><a href='$link' style='text-decoration: none'><b>$title</b></a></h3>$description</li></ul></div>"; 

и в CSS добавить

h3 { 
    margin: 0px; 
} 

Fiddle

Answer 2

Это потому, что <h3> является элемент уровня блока.

Вам необходимо добавить style=float:left; width:auto.

Answer 3

, пожалуйста, используйте ниже CSS для уменьшения пространства:

h3{padding: 0; margin:0; line-height:normal;}