B. Clay Shannon B. Clay Shannon - 3 months ago 8
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">

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

<table>
<tr>
<th>Item Code</th>
<th>Description</th>
<th>Qty</th>
</tr>
<tr>
<td>100250</td>
<td>Artichokes Green Globe 18 Size</td>
<td>9084</td>
</tr>





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

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