为什么我的HTML旁边块添加一个多余的结束段落？ [英] Why is my HTML aside block adding a superfluous ending paragraph break?

问题描述

我有这个标记：

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

HTML

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>

正如你可以看到这里（或者，如果你是一个HTML / CSS大师，也许是previsualize），在上面的HTML部分的末尾有一个多余的行或paragrpah中断。其他asides/注释不表现出这种行为。这里是其中之一：

As you can see here (or, if you're an HTML/CSS guru, perhaps previsualize), there is a superfluous line or paragrpah break at the end of the section of HTML shown above. The other "asides"/annotations do not exhibit that behavior. Here's one of them:

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

我需要做什么来驱逐尾随断点？

What need I do to evict the trailing break?

推荐答案

由于@sdcr在注释中告诉你，问题是创建的，因为 aside $ c> p 元素，底部看到的空格是由于段落的 margin-bottom 。

As @sdcr tells you in a comment, the issue is created because that aside in particular has a p element, and the space you see at the bottom is due to the margin-bottom of the paragraph.

为了避免看到它，只需从 aside margin-bottom c $ c>：

To avoid seeing it, just remove the margin-bottom from the last paragraph in an aside:

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

查看它是如何工作的更新您的jsfiddle： http://jsfiddle.net/tL4s1hjr/24/

See it working on an update of your jsfiddle: http://jsfiddle.net/tL4s1hjr/24/

这篇关于为什么我的HTML旁边块添加一个多余的结束段落？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！