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

程序员文章站 2022-04-18 22:58:41

...

就是子导航标题上面那点

        
标题
            
标题                                    标题
                    
标题
                        标题
                        标题
                        标题
                        标题
                        标题
                    
标题
                    
标题
                        标题
                        标题
                    
            
            标题

回复讨论(解决方案)

*{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的父级元素，弄反了。谢大神搞清楚了

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

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。