<CSS>为什么margin和top都设置为零了但是不置顶，有空隙_html/css_WEB-ITnose

来源：动视网责编：小采时间：2020-11-27 16:34:08

<CSS>为什么margin和top都设置为零了但是不置顶，有空隙_html/css_WEB-ITnose

<CSS>为什么margin和top都设置为零了但是不置顶，有空隙_html/css_WEB-ITnose:就是子导航标题上面那点标题标题标题标题标题标题标题标题标题标题标题标题标题标题 #head{ width: 100%; height: 80px; background-color: rgba(193, 193, 193, 0.7); } ul{ list-sty

推荐度：

点击下载本文 文档为doc格式

导读<CSS>为什么margin和top都设置为零了但是不置顶，有空隙_html/css_WEB-ITnose:就是子导航标题上面那点标题标题标题标题标题标题标题标题标题标题标题标题标题标题 #head{ width: 100%; height: 80px; background-color: rgba(193, 193, 193, 0.7); } ul{ list-sty

就是子导航标题上面那点

标题

回复讨论(解决方案)

*{margin:0;padding:0;}

*{margin:0;padding:0;}

没用的而且盒子模型里已经都是0了

xhtml1.0、html4.01没有你说的问题

html5的doctype才会有这个问题

把红色的去掉就好了
.sonh{
font-size: 15px;
display: inline-block;
position: relative;
}
或者把font-size:40px给li下面的a标签，不要直接给.li1

至于原因，主要是字体对行高的影响，
我的理解是 .li1的fz是40px, .sonc继承.li1的fz，
所以相对于父元素可以看成是inline元素的.sonh，它的行高自然受.sonc影响，
如果去掉.sonh的display:inline-block，
那么它作为block元素，在自定义了fz的情况下，行高就由自己决定。

以前确实没太注意html5在这里作了改变

position: relative;
是指元素相对于未设置position:relative;状态下的位移;

以content的左上角为坐标原点，
黄色块在未position时，它的左上角相对于原点的坐标是(0,30) (你可以把两个色块的position:relative去掉看看);
所以黄色在设置了position后，它的实际坐标就是（270，30）;

那黄色块的基准为什么是（0，30）

页面元素在未设置position:relative;前，它所占有的页面区域在那儿，在设置了position:relative;后，那个位置还是它的;

你可以把两个色块的position:relative去掉看看

我刚才想通了，relitive属性元素坐标相对于的是它最原始的位置，不是父辈元素，也就是说黄色块要定位在左上角，t偏移就要设置成（0，-30），是这样吧？能不能在问下，有什么属性是让盒子里的元素是相对盒子的起点做偏移的？

position:absolute;啊

我学傻了，一直以为absolute是脱离盒子，全局定位。relitive基于非static的父级元素，弄反了。谢大神搞清楚了

position:absolute;啊

我学傻了，一直以为absolute是脱离盒子，全局定位。relitive基于非static的父级元素，弄反了。谢大神搞清楚了