B. Clay Shannon B. Clay Shannon - 1 year ago 85
CSS Question

How can I reduce the amount of "whitespace" above my h2 (HTML/CSS)?

I've got a piece of a page that looks like this:

enter image description here

It's coming along, but I want less "dead space" or whitespace between the top border and the "Top 10 Items Purchased" h2 element.

This is the pertinent CSS and HTML:

* {
padding: 0;
margin: 0;
box-sizing: border-box;
.contents {
height: 50%;
width: 100%;
.topleft {
margin-top: 16px;
margin-left: 16px;
margin-bottom: 16px;
padding: 16px;
border: 1px solid black;
.sectiontext {
font-size: 1.5em;
font-weight: bold;
font-family: Candara, Calibri, Cambria, serif;
color: green;
.bottommarginbreathingroom {
margin-bottom: 2px;

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<div class="contents">
<div class="row">
<div class="col-md-6">
<div class="topleft">
<h2 class="sectiontext">Top 10 Items Purchased</h2>
<input type="date" class="bottommarginbreathingroom" id="daterangefrom2" name="daterangefrom2">
<input type="date" class="bottommarginbreathingroom" id="daterangeto2" name="daterangeto2">

<th>Item Code</th>
<td>Artichokes Green Globe 18 Size</td>

I tried adding:

padding-top: -12px;

...to the sectiontext class, and then the topleft class, and that was not effective.

What must I do to reduce the space between the top border and first line of text (h2)?

Answer Source

.sectiontext { margin-top:-4px; }
Not really the best solution, but it should be a quick fix for your issue.
Adjust -4px to whatever.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download