Spacing on the web (padding, margin, and Occam's square) — web design tutorial

Learn the ins and outs of padding and margin to set spacing on web elements. We'll use practical design examples to demonstrate how to add space inside and outside of cards, images, headings, buttons, and Occam's square.

00:00 - Introduction
00:44 - Padding & margin on one side
01:43 - Padding & margin on both sides
02:17 - Padding & margin on all sides
02:26 - Auto margin & centering
04:03 - Negative margin & overlapping
04:30 - Use cases & Occam's square

Note: We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

----------

[jeffreyclaybrook]

"The problem with that sort of not very responsive design is that it's not very responsive."

This guy cuts straight to the point and I respect that.

[person]

Why are these so good. Honest to God, if it wasn't for these training videos, I'd have moved on to a diff platform. Webflow is a big tool and its scary as an ultra n00b, but these videos REALLY make it easy to follow along and learn.

[DesigedByNino]

This software is so amazing I actually learnt how to code after using it. Make it visual, brilliant idea !

[thegoodgolly]

I can't tell you how much I appreciate that you include the CSS! I'm a software dev who wants to start doing web dev freelancing on the side. I feel most at home in vs code, and the little designing I've already done has come in the form of applying css styles that UX designers in my company have already laid out for me. It gets frustrating trying to learn important rules via a different tool when I know what the CSS says much better than webflow, meanwhile on the flip side the visual representation helps me draw the connection between changes to the CSS and the actual on-page effect. I know tutorials without the CSS can seem more comfortable for anyone starting with no coding experience, but I'm glad you included it for folks doing hand-coding.

[RishabKapadia]

Video editing award of the year goes to the guy who did this. He can edit Hollywood movies. 😎🏆

[dimitrisqq]

One thing i noticed during those lessons is that Webflow has not only top-notched videos but also the kindest and funniest people writing in the comment section. That's called building a culture.
edit*: comment::first-letter { text-transform: uppercase; }

[Gome.o]

Jesus dude that new mac is definitely making leaps and improvements to the already stellar quality of this channel.

[Flip_PR]

Webflow is such a powerful webdesigntool, that I don't want to show it to some other designers, but at the same time the hype is really real and I can't hide it anymore.

[AgusRiady]

Thanks for this! This is really one of the thing that makes me confused when switching from print design to web/UI design. You make this much easier to understand. 

Keep up the good work Webflow team!

[ifthis_]

These new videos and animations are just butter, bros! Like sizzling butter. 🧈

[gavinsinger]

I so much wish to have this Webflow as a desktop application!! This is the best EVER web design application!! BEST EVER!!!

[catherinecoloma]

Thank you for this! I just started using webflow and this is one of the things that I was struggling with 😅

[babakfp]

If I were my grandmother, I would give a juicy kiss to this young man for his wonderful tut ;)

[JCL-nuge]

This series is great!

One question: what is considered the best practice when trying to implement overlapping elements like what you showed on the video of the avatar going over the top of its card. I always thought using position: absolute/relative would be a better choice?

[hectorg]

Had no idea you can use negative margins :0 Thansk

[typingmasterpro]

Great
Say more for the windows user. The audience of the windows users is the most I think and they need the advice most. Coz they need the money to buy the mac os mate.

[MegalodonEG]

I understand quantum theory here much better than college class !

[astrovisionmedia]

Woah who is this guy. This face came out of nowhere in the playlist tutorial

[lukewestwood]

Does anyone know the name of the music in the intro, it's epic :D. Would love to know the song name :).

[dthbfzs]

I have one question though: While using templates, I can see vertical spacings between the elements, but there are no margins set. How does that work?