title: What is the difference between height and max-height?
body: <p>I'm trying to make an Accordion Menu by setting the <strong>max-height</strong> of the content to zero and then give it a value when a radio button is checked but when I set the max-height to 0 it creates additional space below the tab<br>
  this additional space is removed by replacing <em>max-height</em> with <strong>height</strong> so why does that happen and what is the difference between the two properties ?<br>
  HTML: </p>
  
  <pre><code>&lt;div class="tab-group"&gt;
    &lt;div class="tab"&gt;
      &lt;input type="radio" name="tab" id="first-tab"&gt;&lt;!--/radio--&gt;
      &lt;label for="first-tab"&gt;First Tab&lt;/label&gt;&lt;!--/label--&gt;
      &lt;div class="tab-content"&gt;
        &lt;p&gt;
          Lorem ipsum dolor sit amet
        &lt;/p&gt;
      &lt;/div&gt;&lt;!--/content--&gt;
    &lt;/div&gt;&lt;!--/.tab--&gt;
  
    &lt;div class="tab"&gt;
      &lt;input type="radio" name="tab" id="second-tab"&gt;&lt;!--/radio--&gt;
      &lt;label for="second-tab"&gt;Second Tab&lt;/label&gt;&lt;!--/label--&gt;
      &lt;div class="tab-content"&gt;
        &lt;p&gt;
          Lorem ipsum dolor sit amet
        &lt;/p&gt;
      &lt;/div&gt;&lt;!--/content--&gt;
    &lt;/div&gt;&lt;!--/.tab--&gt;
  &lt;/div&gt;&lt;!--/.tab-group--&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.tab-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height .5s linear;
  }
  
  
  input[type="radio"]:checked ~ .tab-content {
    max-height: 10em;
  }
  </code></pre>
  
  <p><a href="http://jsbin.com/dejifocamo/edit?html,css,output" rel="nofollow noreferrer">the accordian menu</a></p>