Home > Article > Web Front-end > <CSS>为什么margin和top都设置为零了但是不置顶，有空隙_html/css_WEB-ITnose
<CSS>为什么margin和top都设置为零了但是不置顶，有空隙_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-21 09:12:301544browse
就是子导航标题上面那点
<div id="head"> <ul class="ul1"> <li class="li1"><a>标题</a></li> <li class="li1"><a>标题</a> <div class="sonc" id="content"> <p class="sonh">标题</p> <ul> <li class="son">标题</li> <li class="son">标题</li> <li class="son">标题</li> <li class="son">标题</li> <li class="son">标题</li> <li class="son">标题</li> </ul> <p class="sonh">标题</p> <ul> <li class="son">标题</li> <li class="son">标题</li> <li class="son">标题</li> </ul> </div> </li> <li class="li1"><a>标题</a></li> </ul> </div>
<style> #head{ width: 100%; height: 80px; background-color: rgba(193, 193, 193, 0.7); } ul{ list-style: none; } .li1{ position: relative; float: left; font-size: 40px; font-weight: bold; margin: 20px 30px 0 10px; } .hover1{ color: #ffffff; border-bottom: 5px solid black; } .son{ font-size: 15px; padding: 2px; float: left; color: black; margin-right: 4px; margin-top: 4px; background-color: grey; } .son:hover{ background-color: #51dadd; } .li1 a{ text-decoration: none; } .sonh{ font-size: 15px; display: inline-block; position: relative; } .sonc{ border: 1px solid #a3a3a3; height: 160px; width: 140px; display: none; position: absolute; } </style>
回复讨论(解决方案)
*{margin:0;padding:0;}
*{margin:0;padding:0;} 没用的 而且盒子模型里已经都是0了
xhtml1.0、html4.01没有你说的问题
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
html5的doctype才会有这个问题
<!DOCTYPE html>把红色的去掉就好了
.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）;
position: relative;
是指元素 相对于未设置position:relative;状态下的位移;
以content的左上角为坐标原点，
黄色块在未position时，它的左上角相对于原点的坐标是(0,30) (你可以把两个色块的position:relative去掉看看);
所以黄色在设置了position后，它的实际坐标就是（270，30）;
那黄色块的基准为什么是（0，30）
页面元素在未设置position:relative;前，它所占有的页面区域在那儿，在设置了position:relative;后，那个位置还是它的;
你可以把两个色块的position:relative去掉看看
页面元素在未设置position:relative;前，它所占有的页面区域在那儿，在设置了position:relative;后，那个位置还是它的;
你可以把两个色块的position:relative去掉看看
我刚才想通了 ，relitive属性元素坐标相对于的是它最原始的位置，不是父辈元素，也就是说黄色块要定位在左上角，t偏移就要设置成（0，-30），是这样吧？ 能不能在问下，有什么属性是让盒子里的元素是相对盒子的起点做偏移的？
position:absolute;啊
我学傻了，一直以为absolute是脱离盒子，全局定位。relitive基于非static的父级元素，弄反了。谢大神搞清楚了
position:absolute;啊
我学傻了，一直以为absolute是脱离盒子，全局定位。relitive基于非static的父级元素，弄反了。谢大神搞清楚了