css - 为什么我的 HTML aside block 添加了一个多余的结尾段落分隔符？

Question

我有这个标记:

CSS

aside {
    color: cornsilk;
    font-family: 'Bookman Old School', Candara, Calibri, sans-serif;
}

HTML

<aside style="margin:4px;padding:4px;border:1px solid forestgreen;">
    Some criticize <cite>Huckleberry Finn</cite> because it uses "the N word." While it <em>is</em> an ugly word, that is the way many people spoke in the time and place represented by this novel.

<p>Should it be censored out, or replaced with another word?</p>

<p><cite>Huckleberry Finn</cite> has been criticized from the "git-go" for various reasons (and in fact, Twain rather rejoiced at this than fretted, knowing that calls for his book to be banned would actually draw more attention to it and increase sales).</p>

    <p>Early on, some readers and reviewers were shocked, not by the novel's use of "the N word" (which they may not have considered objectionable or perhaps not even have really noticed, due to its ubiquitous usage throughout the country) but rather for its "low" subject matter and earthy humor, which was considered too crude and rough for "polite society" and sometimes for the very reason that Jim is portrayed sympathetically - as a real person with feelings and thoughts, and not as a minstrel show caricature.</p></aside>

如你所见here (或者，如果您是 HTML/CSS 专家，也许可以预想)，在上面显示的 HTML 部分的末尾有一个多余的行或段落分隔符。其他“旁白”/注释不会表现出这种行为。这是其中之一:

<aside style="margin:4px;padding:4px;border:1px solid forestgreen;">
That is to say, 40-50 years ago at the time Twain wrote it, which was in the 1880s; in other words, the time period covered in "Huck Finn" is the 1830s and 1840s, between the War of 1812 and the Civil War.
</aside>

我需要做什么才能取消尾随中断？

Answer 1

正如@sdcr 在评论中告诉您的那样，问题的产生是因为 aside 特别有一个 p 元素，您在底部看到的空间是由于到段落的 margin-bottom。

为了避免看到它，只需从 aside 的最后一段中删除 margin-bottom:

aside p:last-child {
    margin-bottom: 0;
}

看到它正在更新你的 jsfiddle:http://jsfiddle.net/tL4s1hjr/24/