I've got a div containing configurable content (but likely paragraphs of text) and I've come across an issue animating it's height.

Here's my animation (nice and slowed down), which goes from a height 0 to it's calculated height based on it's content:

[![enter image description here](https://i.stack.imgur.com/gi2MP.gif)](https://i.stack.imgur.com/gi2MP.gif)

See the "hop" at the end?

After some investigation, I think I've worked out the issue. I'm animating the div that contains the html elements liket this (Angular 2, but it's not really relevant to the issue):

```
<div [@visibilityStateTrigger]="visibilityState" style="display: block">
    <ng-content></ng-content>
</div>

```

ng-content is where the children go, the visibility state is the animation triggers. The important thing is it's a div, it contains children.

My assumption (new to web development) would be that the div would size to it's children's content. And it certainly seemed to until I animated it and saw this strange step and had a look at it in the chrome inspection:

Here's the div:
[![enter image description here](https://i.stack.imgur.com/YENU1.png)](https://i.stack.imgur.com/YENU1.png)

```
<div _ngcontent-8027-15="" style="display: block; opacity: 1;">
  <p _ngcontent-8027-11="">
     Dissertation I designed an electronic tuning device for a violin including a cost estimate and full circuit diagram of all components.
  </p>        
</div>

```

Here's it's content:
[![enter image description here](https://i.stack.imgur.com/vDIcf.png)](https://i.stack.imgur.com/vDIcf.png)

When contracted, it simply sets the height and opacity to 0:

```
<div _ngcontent-8027-15="" style="display: block;height: 0px;opacity: 0;">
   <p _ngcontent-8027-11="">
      Dissertation I designed an electronic tuning device for a violin including a cost estimate and full circuit diagram of all components.
   </p>
</div>

```

However, it's the in-between stages where the problem is. I'm presuming due to the way it performs the animation.

I know, however, that it's not an issue if the height of the div matches the height of the content. Since I'm animating the parent div not the child components only the div's height is used in the animation.

I found an awkward solution: use padding instead of margin. However, this involves never using margin on any styles that I'm likely to ever want to put into this component - and re-styling every single html style to use padding instead of margin.

Is there a way of telling my div to size it'self based on child's full size, including margin?