Question

我遇到这个奇怪的问题，当我在div中放置一个列表时，它会在div的顶部产生巨大的差距。造成这种情况的原因是什么？如何解决？

body {
background-color:aliceblue;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

#logosearch {
background-color:lightgray;
width:1024px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

#nav {
background-color:lightblue;
width:1024px;
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
}

http://jsfiddle.net/myvegancookbook/JP899/

Answer 1

没有看到你的代码就无法分辨，但我怀疑你有一些CSS规则在你的列表上放置一个上边距或填充。您是否尝试过使用Firebug或其他站点分析器来查看实际应用的CSS规则？

编辑：是的，看起来您在ul上有一个余量...将此添加到您的CSS：

ul { margin: 0; }

您需要取消保证金/填充，您不需要像代码中那样为每个方向提供0px。

另外，看看CSS重置，它会帮助你从一个已知的基线开始，这样你就不会遇到像这样的问题......

以下是您所做的更改的小提琴：http://jsfiddle.net/JP899/2/

Answer 2

您可以在css文件的开头添加一些重置所有值的规则，然后开始编写自己的填充或边距。你可以使用类似的东西：

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

在列表中放置列表时，可以在Div之上进行操作

2 个答案: