减少搜索结果中标题和描述之间的空间

Question

I have created a search page for a website which displays the title and description. There's a lot of space between the title and description.

Here's the sample code for displaying the results

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

eventhough there is no "br" tag in between title and description there's a lot of space between them. How to get rid of this space. Could you let me know over here. Does line-height function works over here?

Here's the css code

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

Thanks

Answer 1

If you look closely to the HTML you are closing div before </li></ul> here at end </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>";

should be </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>";

and in CSS add

h3 {
    margin: 0px;
}

Fiddle