Browsers render a gap between heading and paragraph tag, by applying default top and bottom margins to these tags. If you want to remove all space between a heading and the paragraph that follows it, you have to remove the bottom margin from the heading and the top margin from the paragraph. The easiest way is to simply assign a negative bottom margin to the heading. Note: Margins can be set to negative values, though padding cannot. The next CSS code illustrates this.
File test.css
h2 {
font: 12px Arial, Geneva, Helvetica, sans-serif;
margin-bottom: -6px;
}
File test.html
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”https://www.w3.org/1999/xhtml” lang=”en-US”>
<head>
<title> How to remove all space between a heading and the paragraph that follows it with CSS </title>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″ />
<link rel=”stylesheet” type=”text/css” href=”test.css” />
</head>
<body>
<h2>Stocks Fall as Sandy Shuts U.S. Markets</h2>
Stocks fell around the world and gasoline rose as Hurricane Sandy threatened U.S. East coast refineries and closed equity trading. Italian two-year notes dropped for a sixth day and the euro weakened.
</body>
</html>
The next picture shows the result:
Removing of all space between a heading and the paragraph that follows it with CSS