title的现height为32我理解了，但原height是否是34？
风早君418
2016-06-28 22:30
原问题有更改：
#title li{
display:inline-block;
text-align:center;
width:60px;
line-height:30px;
padding:0;
border:1px solid #999999;
border-bottom:none;
margin-left:5px;
}
#title li.on{
border-top:2px solid #8B4513;
border-bottom:2px solid #FFFFFF;
}
#title{
border-bottom:2px solid #8B4513;
height:32px;
}
为了显示的清楚，原题中的白色被我换成了蓝色。
如图C所示，为了达到题目中蓝色线条部分空白的效果，title的height被设置为32，height=line-height30+border-top2
但如果删除height=32的条件，就会变成如图B所示，但是我不知道如图B所示的height是否是34？
1回答
-
- 洛伦丹夏天
- 2016-06-29 17:35:59
图A并不是36，应该是35。
照你说，如果删除height = 32的条件，那么title的高度就由里面的元素的高度决定，
也就是li的高度+li的边框+加上title的边框。
li的高度为：30；li的边框为：1+1=2；title的边框（border-bottom：2px）：2；
这样加起来是34没错是吧？
但是你有一个li.on的border-top啊，那个可是两像素啊，所以应该是35。
所以在没设置title的高度的前提下，是达不到题目中的效果的。
多去了解下HTML的盒模型box-sizing。
你看，中间那条缝隙，明显没有下面的粗呢。
JavaScript进阶篇
468195 学习 · 21891 问题
相似问题