Sizing of Header Text for Expandable Text

I am trying to change the spacing in between the headers of my expandable sections as seen here. I have figured out how to change the font size, but as I increase the size, the headers begin to overlap each other. I am really new at this, so sorry if this is an obvious answer. I am using Squarespace as my host.

Here is the HTML for that section:

<span style="cursor:hand; cursor:pointer" onClick="openAll()">[ Open 
All</span> | <span style="cursor:hand; cursor:pointer" 
onClick="closeAll()">Close All ]</span><br /><br />

<div onClick="openClose('a1')" style="cursor:hand; cursor:pointer; 
font-family:verdana,arial,helvetica,sans-serif; font-size:30pt"><b> 
MIDDLE SCHOOL +</b></div>
 <div id="a1" class="texter">
<p>

</p>
Middle School - 6th-8th Grade (11-14 yo)
Being a Middle School student can be hard, fun, quirky and, for some 
reason, no matter how much the culture changes the experience of being 
a Middle School student never changes. If you are in 6th, 7th, or 8th 
Grade in a private, public, or homeschool setting, you have a place 
with us that is specifically geared to and focused on navigating the 
Middle School aged years while trying to grasp the Gospel’s effects on 
that time of life. Join us for any of our regular Middle School events 
and/or our Middle School Sunday Night Fellowship.
<p> 
</p>

   <i><b>Middle School Sunday Night Fellowship (SNF)</b></i>
SNF occurs most Sunday nights during the school year. These nights have 
four elements to them - food, games, worship, and discipleship. Dinner 
is always provided for all students. Middle School SNF runs from 
5:00pm-7:00pm in the Student Ministry Room (110). To find out more 
about SNF, check out the SNF section on the Student Ministry page.

<p>

</p>

<br /><br />
 </div>

And here is the Page Header HTML:

<script language="JavaScript" type="text/javascript">
<!-- Copyright 2007, Sandeep Gangadharan -->
<!--
if (document.getElementById) {
 document.write('<style type="text/css">.texter {display:none; border- 
  left:white 20px solid; color:#404040; font- 
 family:verdana,arial,helvetica,sans-serif; font-size:9pt} @media print 
{.texter {display:block;}}</style>') }

 var divNum = new Array("a1","a2","a3", "a4", "a5"); 
function openClose(theID) {
 for(var i=0; i < divNum.length; i++) {
  if (divNum[i] == theID) {
   if (document.getElementById(divNum[i]).style.display == "block") { 
document.getElementById(divNum[i]).style.display = "none"     }
    else { document.getElementById(divNum[i]).style.display = "block" }
   }else { document.getElementById(divNum[i]).style.display = "none"; }
 }
}

function openAll() {
 for(var i=0; i < divNum.length; i++) {
   document.getElementById(divNum[i]).style.display = "block";
    }
   }

function closeAll() {
 for(var i=0; i < divNum.length; i++) {
   document.getElementById(divNum[i]).style.display = "none";
 }
}
 // -->
 </script>

Solution

add this to your css code

div[onclick^=openClose] {
    margin-bottom:  20px;
}

This code will give margin-bottom: 20px for any div that has the attribute onclick and it's value starts with openClose value.

this image may explain more further.

thanks @Yulio Aleman Jimenez

Edit: to add css code to your html, just type the css code below into the <head> tag.

<style>
    div[onclick^=openClose] {
        margin-bottom:  20px;
    }
</style>