How to fill the anchor element's height to 100% in html?

Question

I have created a top bar that have height: 50px, then an anchor element inside it, the anchor element with it's padding supposed to be exact as the top bar height.

Testing the code in major browsers, Firefox has given the exact pixels height of top bar to anchor element, but in Chrome and IE, it have -1px result. Fiddle Here

HTML:

<div > <a href="">Text Here</a> </div>

CSS:

div {
    width: auto;
    height: 50px;
    background-color: #333;
}
a {
    padding: 10px;
    display: inline-block;
    font-size: 24px; /* Adjusting this would affect element block size */
    color: white;
    font-family:'Bebas Neue';
    background-color: #777;
}
a:hover { background-color: green; }

How could I fill the dimensions of the <a> anchor element up to the div's height?

Answer 1

As no one seems to have shown you the box-sizing css property: Add the following to your <a>

height:100%;
box-sizing:border-box;

EDIT:

• To vertically align the content: Use display table-cell on the <a> element and display: table on its parent.

div {
  width: auto;
  height: 100px;
  background-color: #333;
}
a {
  padding: 10px;
  display: table;
  font-size: 24px;
  color: white;
  font-family: 'Bebas Neue';
  background-color: #777;
  height: 100%;
  box-sizing: border-box;
}
a > span {
  display: table-cell;
  vertical-align: middle;
}
a:hover {
  background-color: green;
}

<div>
  <a href=""><span>Text Here</span></a> 
</div>

Fiddle Here

Answer 2

Here is the another way :-

Fiddle :http://jsfiddle.net/nikhilvkd/4YQtA/3/

a {
    height: 30px;/*changes here*/
    padding:10px;
    display: inline-block;
    font-size: 24px;
    color: white;
    font-family:'Bebas Neue';
    background-color: #777;
}