Kan ikke komme af med mellemrum før div

Har dette script, der folder en div ud:

<style type="text/css">
.cont {
    width: 450px;
    font: 11px arial, verdana sans-serif;
}
.cont img {
    vertical-align: middle;
}
.cont a {
    color: #666;
    text-decoration: none;
    -moz-outline: none;
}
.cont a:visited {
    color: #666;
    text-decoration: none;
    -moz-outline: none;
}
.cont a:hover {
    color: #f90;
    text-decoration: none;
}
.cont div {
    margin: 5px 0px 5px 20px;
    padding: 4px;
    background-color: #ededed;
    border: 1px dashed #cccccc;
    display: inline;
}
</style>

<script type="text/JavaScript">
function toggle(elm) {
    var idInx = elm.id.split("head_")[1];
    var tDiv = document.getElementById("text_"+idInx)
    var im = document.getElementById("icn_"+idInx);
    tDiv.style.display = (tDiv.style.display=="none")? "block" : "none";
    im.src = (im.src.indexOf("open")!=-1)? "grafik/close.gif" : "grafik/open.gif";
}
</script>

<div class="cont"><img id="icn_0" src="grafik/open.gif">
    <a href="#" id="head_0" onclick="toggle(this);return false">En overskrift</a>
    <div id="text_0" style="display:none">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Nullam tristique risus sed massa lobortis fermentum.
    Sed pretium sem sed ligula. Suspendisse iaculis
    </div>
</div>

<div class="cont"><img id="icn_1" src="grafik/open.gif">
    <a href="#" id="head_1" onclick="toggle(this);return false">En anden overskrift</a>
    <div id="text_1" style="display:none">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    Nullam tristique risus s ed massa lobortis fermentum.
    Sed pretium sem sed ligula. Suspendisse iaculis
    </div>
</div>

-- Men har jeg noget tekst - f.eks. en overskrift - før disse divs så opstår der et mellemrum mellem teksten og de efterfølgende divs. Hvordan får jeg det væk?


Mvh.