My CSS specifies font size of 14px, line height of 14px, and padding of 7px on the top and bottom. The total should be 28px.
When I apply these styles in a div, it results in a height of 28px. However, when applied to a ul li a element, the height becomes 30px. Can anyone help me understand where this extra 2px is coming from?
I am trying to achieve an exact height in a ul, and I believe I need to adjust the padding on the ul li a elements since I want them all to be clickable.
Feel free to check out this example: 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>