为什么我的HTML代码块添加了一个多余的结束段落分隔符



我有这个标记:

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>

正如你在这里看到的(或者,如果你是HTML/CSS大师,也许是预览版),在上面显示的HTML部分的末尾有一个多余的换行符或pararpah break。其他"旁白"/注释没有表现出这种行为。这是其中之一:

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

我需要做些什么来驱逐尾随中断?

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

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

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

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

最新更新