请问关于div的问题

woshini1982 2015-09-05 04:02:38

请问以下代码中的红色部分 margin-top:15px; 这个值是怎么确定的呢？（也就是为什么是15px）
另外红色部分的margin-left:-1px; ，这个值又是怎么确定的呢？（也就是刚好 -1px的时候，它就会对齐上边的菜单）

<html>
<head>
<style type="text/css">
body {
color:#fff;
font-size:12px;
}
ul li {
float:left;
height:30px;
background-color:#99CC99;
margin:0 10px;
padding:0;
border:1px solid #c30;
width:100px;
}
ul li div {
border:1px solid #f00;
background-color:#996666;
width:100px;
height:300px;
margin-top:15px;
margin-left:-1px;
}

</style>
</head>
<ul>
<li>
标题 - #text
<div>
下拉菜单 - div
</div>
</li>
</ul>
</html>
所得如图 a所示：

图 a
//----------------------
如果把 margin-top:15px; 改为 margin-top:30px;
那么就会的到如图 c 所示：（这时候下拉菜单就会跟标题有间隙，请问这 15px 是怎么确定的呢）

...全文

149 4 打赏收藏转发到动态举报

写回复

用AI写文章

4 条回复

切换为时间正序

请发表友善的回复…

发表回复

天际的海浪 2015-09-06

打赏
举报

引用 3 楼 woshini1982 的回复:

[quote=引用 2 楼 jslang 的回复:] 你字体font-size设置为12px，行高line-height就会自动变为15px li的height是30px; 30 - 15 = 15 =================== div的边框宽度为1px 设置margin-left:-1px;就能让li的边框和div的边框重合

@ jslang 谢谢您的回复，还想请问下 “ 你字体font-size设置为12px，行高line-height就会自动变为15px ” 为什么 font-size设置为12px 就会另到行高line-height为15px呢？另外 li的height是30px; 能不能理解为 “标题 - #text”所占的绿色那方块呢？最后就是 margin-top:15px ；这个究竟是哪里到哪里的具体是15px呢？麻烦再帮忙回复下，先谢了。 [/quote] 行高line-height的默认值是1.2（不同的浏览器或不同的元素中可能不一样）。就是说在没有设置行高line-height，单独设置字体font-size时，行高会自动变为字体的1.2倍（小数会向上取整）。 height30px 是绿色那方块 margin-top是元素外部的上边距，你把它改为0px，与15px对比一下就知道是哪里到哪里的了

woshini1982 2015-09-06