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:

33 comments

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

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

  3. Great Video!!!!!
    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.

  4. 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
    Webflow.io as a placeholder,unlike the:/mysite1.u.n/wixsite.com

    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👍🏻

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

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

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

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

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

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

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

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

Leave a comment

Your email address will not be published. Required fields are marked *