This post is part 2 of an animation series I am doing; you can read part 1 [here](https://brandonrozek.com/2015/05/animatable-border/). In this post, we’ll look at the different parts of the box model (margin, padding, height, and width) and see how they can be animated.
<!--more-->
The W3C has a great starting reference for the [CSS Box Model](http://www.w3.org/TR/CSS2/box.html). It can be wordy at times, but has everything you need to know. I had never heard of _margin collapsing_ until I read that. Luckily there is a great [post](https://css-tricks.com/what-you-should-know-about-collapsing-margins/) on CSS-Tricks written by Geoff Graham explaining what it is. To see it all in action, take a look at this Codepen [demo](http://codepen.io/brandonrozek/full/RWPYgV/){.broken_link}–I reference this multiple times in this post. Now, on to the box model.
### Margin
* Accepts 1 to 4 numerical values (negative numbers are allowed)
* If you use 4 values, the first value is the top margin and the rest follow in a clockwise fashion
* Initial value: 0
Margins can be described as the space around an element. In the Codepen demo (#1), it shows 2 boxes. The first box has a margin-right that is increasing, making it seem as though it’s pushing the second box away.
<pre><codeclass="language-css">
@keyframes margin {
to { margin-right: 7rem; }
}
.margin {
display: inline-block;
height: 5rem;
width: 5rem;
background-color: lightblue;
vertical-align: top;
}
.margin:first-of-type {
margin-right: 0;
animation: margin 4s ease 0s infinite;
}
</code></pre>
### Padding
* Accepts 1 to 4 non-negative values
* If you use 4 values, the first value is the top margin and the rest follow in a clockwise fashion
* Initial value: 0
Padding is the space between the content and the border of an element. In the demo (#2), it shows a box in which its padding is increasing.
<pre><codeclass="language-css">
@keyframes padding {
to { padding: 2rem; }
}
.padding {
display: inline-block;
padding: 0;
background-color: lightgreen;
animation: padding 2.5s ease 0s infinite;
}
</code></pre>
### Height
* Accepts a non-negative number, this number is overridden however by (min/max)-height
* Initial value: auto
“Height” is the height of an element without its <span><span> padding, border, or margin. In the demo (#3) you can see the boxes’ height shrink, and each box begins it’s animation at a different time. </span></span>
* Accepts a non-negative number, this number is overridden however by (min/max)-width
* Initial value: auto
“Width” is the width of an element without its <span><span> padding, border, or margin. In the demo (#4), it is similar to #3, however, it’s the width being affected as opposed to the height. </span></span>
And so with this we can add another collection of animations to our toolbelt! If you’re wondering why I left border out of this box-model post, it’s because I have already written a post dedicated to just the [border animation](https://brandonrozek.com/2015/05/animatable-border/). Here are some of the resources I looked at for this post. Hopefully I’ll come back with another animatable post soon! <https://developer.mozilla.org/en-US/docs/Web/CSS/margin><https://docs.webplatform.org/wiki/css/properties/margin>{.broken_link} <https://developer.mozilla.org/en-US/docs/Web/CSS/padding><https://docs.webplatform.org/wiki/css/properties/padding>{.broken_link} <https://developer.mozilla.org/en-US/docs/Web/CSS/height><https://docs.webplatform.org/wiki/css/properties/height>{.broken_link} <https://developer.mozilla.org/en-US/docs/Web/CSS/width><https://docs.webplatform.org/wiki/css/properties/width>{.broken_link}
