CODEWITHSUNDEEP
htmlcss
Moaaz Bhnas
Moaaz Bhnas

Reputation: 1170

What is the difference between height and max-height?

I'm trying to make an Accordion Menu by setting the max-height 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
this additional space is removed by replacing max-height with height so why does that happen and what is the difference between the two properties ?
HTML: 

<div class="tab-group">
  <div class="tab">
    <input type="radio" name="tab" id="first-tab"><!--/radio-->
    <label for="first-tab">First Tab</label><!--/label-->
    <div class="tab-content">
      <p>
        Lorem ipsum dolor sit amet
      </p>
    </div><!--/content-->
  </div><!--/.tab-->

  <div class="tab">
    <input type="radio" name="tab" id="second-tab"><!--/radio-->
    <label for="second-tab">Second Tab</label><!--/label-->
    <div class="tab-content">
      <p>
        Lorem ipsum dolor sit amet
      </p>
    </div><!--/content-->
  </div><!--/.tab-->
</div><!--/.tab-group-->

CSS:

.tab-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s linear;
}


input[type="radio"]:checked ~ .tab-content {
  max-height: 10em;
}

the accordian menu

Upvotes: 6

Views: 19788

Answers (3)

Alexandre Alencar
Alexandre Alencar

Reputation: 162

The height property does not include padding, borders, or margins; it sets the height of the area inside the padding, border, and margin of the element!

The max-height and min-height properties are used to set the maximum and minimum height of an element. This prevents the value of the height property from becoming larger than max-height or smaller than min-height. The value of the max-height and/or min-height property overrides height.

Automatic Minimum Size of Flex Items

Content height: the 'height' property

Upvotes: 3

MartinWebb
MartinWebb

Reputation: 2008

Looking at your bin it seems the CSS to perform the effect you want is as follows, you can achieve this by using height, for an accordion height would be the preferred setting since you want the option open to its full height. max-height is a fixed forced maximum whereby height is a preferred solution that could be forced larger by content such as an image, in the same way mi-height is a forced min value. 

.tab-content {
  height: 0;
  overflow: hidden;
  transition: height .5s linear;
}


input[type="radio"]:checked ~ .tab-content {
  height: initial;
}

Using initial as the height when the button is checked will render the content at it natural full height.

The max-height and height don't add any padding. The padding you are referring to is being added by a web-kit-margin-after setting that is 1em on the inner paragraph tag.

p {
    -webkit-margin-after: 0;
}

Upvotes: 0

Hanif
Hanif

Reputation: 3797

Main difference between is height take the space from screen even selector element is empty but max-height set the of maximum limit of height on selector element but no space will take until no content pushed inside.

For better understand see here

Upvotes: 6

Related Questions