Padding on anchor included in list doesn't resize the list item's height

Question

I would like to know, why setting vertical padding on an anchor nested in an unordered link doesn't resize the list items height. As you can see on jsfiddle, the tabs are bigger than the ul component, so it overlaps with the div underneath.

I would expect that the li and also the ul gets as high as its content, so the div with the paragraph gets shifted down.

HTML

<div class="tab-row">
    <ul>
        <li>
            <a href="#"><span>Tab 1</span></a>
        </li>
        <li>
            <a href="#"><span>Tab 2</span></a>
        </li>
    </ul>
</div>
    <div class="tab-content">
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla tincidunt semper quam. Suspendisse potenti. Donec adipiscing consequat erat. 
            Morbi semper, libero vel pulvinar tincidunt, lorem lorem scelerisque felis, sed tempor dolor dolor non felis. Quisque eu est. 
            Quisque blandit, pede non commodo convallis, purus elit pellentesque neque, in tempor libero dolor quis quam. Quisque eros. Vivamus porttitor. 
            Aenean quis odio. Cras commodo risus ac est. Fusce molestie, lacus at sagittis fermentum, dolor eros ultrices tellus, ac sollicitudin pede risus.</p>
    </div>
</div>

CSS

ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.tab-row li {
    display: inline;
}
.tab-row li a {
    border: 1px solid #CCCCCC;
    padding: 10px;
    text-decoration: none;
}
.tab-content {
    border1px solid #CCCCCC;
}
.tab-content p {
    text-align: justify;
    margin: 10px;
}

Answer 1

Because you're adding padding to an inline element. Add:

.tab-row li a {
   display: inline-block;
}

Or float it to the left.

why setting padding on an inline element doesn't work here?

You can only have left and right padding to inline elements. Those are the specs. Every property should be applied "In the line", the line being defined by the line-height property of the parent element. Read more about it in this article.

why just floating it left works too?

Floats turn it into a block element.