div结尾和段落开头之间需要有间距答案

【问题标题】：Need to have spacing between end of div and beginning of paragraphdiv结尾和段落开头之间需要有间距
【发布时间】：2010-11-07 00:17:54
【问题描述】：

我在段落标签中有文本，可以紧贴在 div 的底部，您将在这张图片中看到：http://i44.tinypic.com/e05s0z.png

我可以在 div 的底部添加一些填充来解决此问题，但可能会有多个 div，具体取决于该页面上有多少项目。

我需要做的是，在最后一个 div (class="article") 的末尾和段落标记中的文本之间放置一些间距。

这是文章类的css

.article {
  padding:10px;
  overflow:auto;
}

带有段落标签的文本

<p>Herkimer County Community College does not 
discriminate on the basis of race, color, sex, 
national origin, age, handicap, or marital status 
in admission, employment, or in any aspect regarding 
the conduct of College business.</p>

我该怎么办？

【问题讨论】：

标签： html css spacing

【解决方案1】：

给最后一个段落一个 id - 也许是#disclaimer - 然后设置它的样式，使其具有 padding-top。

<p id="disclaimer">Herkimer County Community College does not 
discriminate on the basis of race, color, sex, 
national origin, age, handicap, or marital status 
in admission, employment, or in any aspect regarding 
the conduct of College business.</p>

还有……

#disclaimer {
 padding-top: 10px;
}

[编辑] 根据您的 cmets，对此的替代方法是将文章包围在 div 中，并为 div.class 赋予底部边距/填充样式。

【讨论】：

段落标签在div之外，只有这样吗？否则，我将不得不对具有此 div 的每个页面以及下面的段落执行此操作。必须有一种方法可以在带有段落标签的 div 之后有适当的间距而无需破解它？？
您为最后一段提供了一个 ID - 仅在页面中使用一次。你不应该因为它影响任何其他段落而有任何麻烦 - 还是我误解了你？
正确，但是 div 是动态的，是从数据库中发布的（使用 CMS），对于在 div 结束后发布到段落中的数据也是如此，所以我宁愿让它像它应该的那样工作，而不是每个段落。

【解决方案2】：

您可以将段落包装在顶部有填充的容器中，因此上面的内容无关紧要。

例如，用下面的 css 将其包裹在一个 div 中

div.finaltext {
   clear: both;
   margin-top: 10px;
}

【讨论】：

既然可以一开始就将类添加到 p 标签中，为什么还要将它包装在另一个具有类的元素中？

【解决方案3】：

你能简单地在最后一个 div 之后添加几个 <br/> 标签吗？

【讨论】：

【解决方案4】：

如果您的网站上有其他段落并且不想给它一个 id 或类，那么您也可以使用

.article + p {padding-top: 10px;}

不过，一些旧浏览器将无法识别此选择器

【讨论】：

【解决方案5】：

还有first-child and last-child css 方法

注意：检查您希望支持的浏览器的兼容性

【讨论】：

不被所有浏览器识别——更遗憾的是。

【解决方案6】：

据我所知，这是您的选择：

使用:last-child CSS3 伪类以最后一个 div 为目标。这 IE根本不支持，所以取决于浏览器的重要性对你来说这是否是一种选择，但至少其他浏览器会得到想要的效果。

.article:last-child { padding-bottom: 20px; }
在最后一个 div 中添加一个类，样式同上。这并不理想，可能会也可能不会，具体取决于 div 的生成方式。
使用padding-top 值向p 标签添加一个类。
使用.article + p 选择器来定位与.article 直接同级的p 标签。 IE7（我认为）支持这一点，但 IE6 不支持。

我总是优先选择 #1 或 #4，因为它可以减少 HTML 中的混乱，但正如我提到的，IE 可能会成为问题，具体取决于您的需求。

（感谢Residuum #4）

【讨论】：

【解决方案7】：

是这样的结构吗？：

<div class="article">jdhfksdjhfksdhk</div>
<div class="article">jdhfksdjhfksdhk</div>
<div class="article">jdhfksdjhfksdhk</div>
<p>kfdhsjkfdks</p>

你使用 padding: 10px 所以 div 有 10px 内边距。

如果它是 CMS，我确信段落的文本可以包含在另一个标签 (DIV) 中，或者可能包含在 (P) 的类中。如果不是这种情况，请问是否有围绕所有文章 div 和 p 标签的包装器？

如果是这种情况，那么您可以使用 CSS 访问 P 标签，如果不是，则无法在每个浏览器中实现这一点。

或者...我意识到你可以在这里耍花招。但您必须确保在文章 div 之上有一个可选择的 div。

应该是这样的：

.article { margin-top: -5px; margin-bottom: 15px; }

因此，每个 div.article 将向上移动 5px，在文章 div 之间留出 10px 的实际边距。但最后一个不会让 -5px 向上移动，所以你最终会得到 P 标签的 15px 底部边距。

您可以玩弄这些数字，使其成为最舒适的数字。如果您需要更多控制，请使用您设置为 10px 的内边距值，并相应地设置它们以补偿边距偏移。

【讨论】：