angularjs - Padding offsets height with ng-hide CSS transition -

i have problem css transition of heights property when element has padding on it.

.content {   padding: 10px;   border:1px solid black;   overflow: hidden;   -webkit-transition: linear 1s;   transition: linear 1s;   height: 16px; }  .content.ng-hide-add { height: 16px; } .content.ng-hide-add.ng-hide-add-active { height: 0px; } .content.ng-hide-remove { height: 0px; } .content.ng-hide-remove.ng-hide-remove-active { height: 16px; } 

this plunker: http://plnkr.co/edit/pbyauht8w6zvzktr7etr?p=preview

as can see, animation still covers 16px, offset total of 20px of padding. if change padding 0, animation works expected in plunker: http://plnkr.co/edit/50zfnnaoopx7hgl2tryi?p=preview

i tried using box-sizing:border-box breaks animation. can me this?

you can:

1) change padding-top in animation (text change position)

.content.ng-hide-add.ng-hide-add-active { height: 0px; padding: 0px 10px;} .content.ng-hide-remove { height: 0px; padding: 0px 10px;} 

2) put content container:

html:

<div ng-hide="!show" class="container">   <div class="content">look @ lovely content</div> </div> 

css:

.container {   border:1px solid black;   overflow: hidden;   -webkit-transition: linear 1s;   transition: linear 1s; }  .content {   padding: 10px; }  .container.ng-hide-add { height: 38px;} .container.ng-hide-add.ng-hide-add-active { height: 0px; } .container.ng-hide-remove { height: 0px; } .container.ng-hide-remove.ng-hide-remove-active { height: 38px; } 

38px = text + padding + border