html - 试图减少我的

Question

我试图在我的 h2 和我的 ul 元素之间留出更少的空间。但它似乎不可能有边距，ul 元素似乎不允许有那个边距。这样做需要一些技巧吗？因为我尝试使用边距但它不起作用!

我的 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> 

我的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; 
}

Answer 1

据我所知(仅使用您提供的代码)，您没有考虑浏览器的默认设置。如果您不使用 Eric Meyers，请重置 http://meyerweb.com/eric/tools/css/reset/ .简而言之，它会将所有浏览器中的所有设置都设置回零，以便您的站点有一个起点。

但是如果你不想使用或者不能使用这个重置的css文件，你需要明确定义设置。在您的情况下，您需要为每个元素添加以下内容，您将消除当前存在的差距:

#page ul
{
     list-style:none; 
     background:pink;
     margin-top: 0; /*override the default browser setting for the UL element*/
}

如果您根本不希望 H2 和 UL 之间有任何空间，请将 H2 元素上的 margin-bottom 更改为等于 0。我希望这就是您在问题中寻找的内容。