Animatable: Box Model

Brandon Rozek

September 14, 2015

This post is part 2 of an animation series I am doing; you can read part 1 here. 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.

The W3C has a great starting reference for the CSS Box Model. 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 on CSS-Tricks written by Geoff Graham explaining what it is. To see it all in action, take a look at this Codepen demo{.broken_link}–  I reference this multiple times in this post. Now, on to the box model.

Margin

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.

Padding

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.

Height

“Height” is the height of an element without its 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.

Width

“Width” is the width of an element without its 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.

Conclusion

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. 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}