请问关于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 是怎么确定的呢)
...全文
142 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
  • 打赏
  • 举报
回复
引用 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呢? 麻烦再帮忙回复下, 先谢了。
天际的海浪 2015-09-05
  • 打赏
  • 举报
回复
你字体font-size设置为12px,行高line-height就会自动变为15px li的height是30px; 30 - 15 = 15 =================== div的边框宽度为1px 设置margin-left:-1px;就能让li的边框和div的边框重合
hch126163 2015-09-05
  • 打赏
  • 举报
回复
不同浏览器,都有不同的默认 padding,margin 你那样写,不能兼容多个浏览器 通常是这样,让所有浏览器默认值一致: *{padding:0;margin:0;list-style:none;}

87,885

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧