Question

我知道这个问题之前曾被问过多次，但从来没有一个答案可以帮助我处理我的情况。

我的<p>下面有一个<ul>。段落和列表之间有空格。我不想要这个，但不能摆脱它。

我已经应用了最直接的解决方案，但它在我的页面中无效。

这应该是：http://codepen.io/anon/pen/EsFqd 这就是我在codepen中显示的相同css所得到的： enter image description here

谁能帮助我？

根据要求，HTML：

<article id="overzicht"
         style="<% if (browser.contains("Chrome") || browser.contains("MSIE")) {%>margin-right: 45px;<%}%>">
    <header>
        <h2>Overzicht</h2>
    </header>
    <div id="lijsten" data-collapse="persist">
        <p class="open">Groepen</p>
        <ul>
            <% try {
                while (bands.next()) { %>
            <li><%= bands.getString("band_naam") %></li>
            <li><%= bands.getString("pod_omschr") %></li>
            <%  }
               } catch (Exception e) { %>
            <li>Nog geen groepen</li>
            <% }%>
        </ul>
        <p>Campings</p>
        <ul>
            <% try {
                while (campings.next()) { %>
            <li><%= campings.getString("camp_adres") %></li>
            <li><%= campings.getString("camp_cap") %></li>
            <%  }
               } catch (Exception e) { %>
            <li>Nog geen campings</li>
            <% }%>
        </ul>
        <p>Tickets</p>
        <ul>
            <% try {
                while (tickets.next()) { %>
            <li><%= tickets.getString("typ_omschr") %></li>
            <li><%= tickets.getString("typ_prijs") %></li>
            <%  }
               } catch (Exception e) { %>
            <li>Nog geen tickets</li>
            <% }%>
        </ul>
    </div>
</article>

和完整的CSS：

article[id="details"] {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  text-align: center;
  margin-left: 10px;
  margin-right: 10px;
  padding: 10px;
}
p {
    font-size: 1.2em;
    text-align: center;
    border: 1px solid #cbcbcb;
    border-bottom: none;
    padding: 0;
    margin: 0;
    color: white;
    background-color: green;
}

ul {
    background-color: rgba(255, 255, 200, 0.2);
    height: 150px;
    margin: 0;
    padding: 0;
    overflow-y: scroll;
    list-style: none;
    text-align: left;
    border: 1px solid #cbcbcb;
    border-top: none;
}
li {
    margin-bottom: 5px;
    padding-left: -30px;
    margin-left: -30px;
}
li:nth-child(even) {
    text-align: right;
    padding-right: 5px;
    margin-left: -40px;
    padding-left: -40px;
    border-bottom: 1px solid white;
}
li:last-child {
    border-bottom: none;
}
li:first-child {
    padding-top: 3px;
}

Answer 1

如果您的实际网站上的CSS与CodePen中的CSS相同，则听起来您需要重置，或者存在冲突的CSS。

也许尝试添加margin: 0 !important;以查看是否为您排序问题。如果是这样，可能会应用一些比ul选择器更具体的其他样式。

就像其他人所说的那样，看到你真正的CSS会让你的故障排除变得更容易。

Answer 2

您很可能需要使用css重置。这会将所有默认浏览器（用户代理）html样式重置为一致的基线。 Codepen最有可能使用这种重置，因此代码与他们的代码不同。

在css顶部添加Eric Meyers重置样式表的CSS。你可以在http://www.cssreset.com/找到它。重新加载您的页面，看看它是否删除了间距。

编辑：避免使用！important，因为它可能会覆盖您应用程序中的其他边距样式。从长远来看，这可能会引起很多麻烦。使用css重置或找出为什么应用边距并使用较低的css特异性覆盖该样式。

Answer 3

我知道!important似乎可以解决您的问题。但是现在删除它并尝试添加：

body, * {
  margin: 0;
  padding: 0;
}

到CSS文件的顶部以查看是否修复了它。如果没有，也许可以尝试@ mikecan的答案中提到的CSS重置。

HTML p换行符（重新发布转发）

3 个答案: