I'm having trouble reducing the space between my h2 and ul elements. It seems that margins are not effective for ul elements and I can't seem to achieve the desired spacing. Is there a specific trick or technique that can be used to address this issue?
Here is my HTML:
<div id="page">
<div id="info">
<h2>List 1</h2>
<ul>
<li><strong>List Item 1</strong> this is the content 1</li>
<li><strong>List Item 2</strong> this is the content 2</li>
<li><strong>List Item 3</strong> this is the content 3</li>
</ul>
<h2>List 2</h2>
<ul>
<li><strong>List Item 1</strong> this is the content 1</li>
<li><strong>List Item 2</strong> this is the content 2</li>
<li><strong>List Item 3</strong> this is the content 3</li>
</ul>
</div>
</div>
My CSS:
#page
{
width:300px;
margin:0 auto;
}
#page ul
{
list-style:none;
background:pink;
}
#page ul li
{
font-size:13px;
text-decoration:none;
margin-bottom:5px;
}
#page h2
{
font-size:15px;
color:#444;
font-weight:100;
margin-bottom:5px;
background:green;
}
#info
{
margin:10px 0 0 0;
}