高度继承和垂直对齐（内联块）

Question

I have the hardest time getting how those thing work and I'd love it if someone could explain it to me.

1 http://d.pr/i/6TgE+

why http://d.pr/i/UAZn+

*it's actually 9.

I have this code:

<header>
    <div class="container">
        <div class="grid">      
            <div class="grid__item one-half">
                <a href="index.html"  class="logo-site">
                    <img src="http://aurelieremia.be/img/logo-aurelie.svg" alt="logo-ar">
                </a>
            </div><!--

         --><div class="grid__item one-half">
                <nav>
                    <ul class="nav main-nav">
                        <li>
                            <a href="#" class='active'>work</a>
                            <a href="#">about</a>
                            <a href="#">process</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</header>

and this CSS :

.container {
  max-width: 1140px;
  height: 40px;
  margin: 0 auto; }

header {
  background: #4f4348;
  height: 40px;
  position: relative; }

.logo-site {
  height: 82%;
  background: #938b88;
  display: inline-block; }
  .logo-site img {
    height: 28px;
    vertical-align: middle;
    display: inline-block;
    line-height: 40px; }

.main-nav a {
  font-size: 14px;
  text-transform: uppercase;
  color: #f5f3e2;
  line-height: 40px;
  margin-right: 10px;
  font-family: "Brandon Grotesque Medium"; }
  .main-nav a.active, .main-nav a:hover {
    background: #f5f3e2;
    color: #4f4348; }

in case you're not familiar with inuit.css, here's the code that I used from this framework:

.grid{
    margin-left:-$base-spacing-unit;
    list-style:none;
    margin-bottom:0;
}
    .grid__item{
        display:inline-block;
        width:100%;
        padding-left:$base-spacing-unit;
        vertical-align:top;
        @if $global-border-box == false{
            @include vendor(box-sizing, border-box);
        }
one-half          { width:50%; }

My first grid__item doesn't take up 100% of the height from their parent, the grid and container. I tried with height, and a bunch of things, doesn't work. Only way I found to make it work was to make my logo larger.

The second grid__item works, but it's because I applied a line-height with the value of the header on it to center it. However, I want to add border for the active state (5px from the text), so it doesn't help that the links take up all the height. But the problem would be to center it.

What I'd like:

dream http://d.pr/i/6Ggm+

Link to fiddle

Please. Help.

Answer 1

remove { height: XXpx;} from

header {} 

and from

.container{}

http://jsfiddle.net/a9wnG/6/

now the nav is also vertically centered and the active state has border-top and -bottom http://jsfiddle.net/a9wnG/11/