我的字体大小:14px,行高:14px,填充顶部和底部7px。总数应该是28px。
这是一个div,它的高度为28px。但是同样在一个问题上,使得30px。有人能解释一下为什么吗?这个2px来自哪里?
(我需要一个ul的精确高度。我想我需要用ul li a中的填充来控制它,因为我想让它全部可点击)
以下是播放和检查的示例: http://jsfiddle.net/nyv4x9jv/
#menu {
padding:7px 14px;
font-family: 'verdana', sans-serif;
font-size:14px; line-height:14px;
margin:0;
display: inline-block;
background-color:red;
}
#menu2 ul li a {
padding:7px 15px;
font-size:14px; line-height:14px;
font-family: 'verdana', sans-serif;
list-style-type:none;
text-decoration: none;
margin:0;
background-color:red;
}
#menu2, ul, li, a {
margin:0; padding:0; border:0;
}
<div id="menu"> menu </div>
<br><br>
<div id="menu2">
<ul>
<li><a href="#"> menu</a></li>
</ul>
</div>
答案 0 :(得分:1)
存在差异,因为div
是块元素而a
是内联元素
如前所述,您不应该在a
字段上应用行高,而是在较高级别(仅从CSS中删除a)
#menu2 ul li{
padding:7px 15px;
font-size:14px; line-height:14px;
font-family: 'verdana', sans-serif;
list-style-type:none;
text-decoration: none;
margin:0;
background-color:red;
}
有关行高属性的更多信息,可以查看
https://developer.mozilla.org/en-US/docs/Web/CSS/line-height
答案 1 :(得分:1)
使用box-sizing:border-box
将允许您在锚链接上设置包含填充和边框的固定高度。
然后,只需确保填充+线高等于您设置的总高度。
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#menu2 ul {
font-family: 'verdana', sans-serif;
list-style-type: none;
text-decoration: none;
margin: 0;
background-color: red;
}
#menu2,
ul,
li,
a {
margin: 0;
padding: 0;
border: 0;
}
#menu2 ul li a {
font-size: 14px;
line-height: 14px;
padding: 7px;
height: 28px;
display: inline-block;
text-align: center;
text-decoration: none;
color: white;
background: #f09d09;
}
#menu2 ul li a:hover {
background: green;
}
&#13;
<div id="menu2">
<ul>
<li><a href="#"> menu</a>
</li>
</ul>
</div>
&#13;
答案 2 :(得分:0)