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

Get started with Webflow:


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

  2. My Man this site-builder is amazing!🤩.
    I used it for a while and i can't express how many times ill smash 5*** ratings.
    -1 its easy and quite hard in the first day, but i learn new techniques evryday.
    -2 at least its better than wix.(dont hate on me ik wix is ez) reasons:
    -1 my test websit( i made for fun) worked properly,the S.E.O worked good just with as a placeholder,unlike the:/mysite1.u.n/

    Well its overall a good site builder. At least i can create my site from scratch instead of T E M P L A T E S.

    Good job👍🏻

  3. 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?

  4. Hello. I'm desperate. When I build up a page and pull it together, the last window overlaps the other two above. Maybe someone knows how I can do it right?

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

  6. 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!

Leave a comment

Your email address will not be published.