The div block is the most basic and versatile element used in website design and development. To a certain extent, a div block can be whatever you want it to be. For example, buttons, containers, and sections are all just div blocks with extra properties. A div block can also be used to create space or dividers, but the most common use for a div block is to group other elements together.

In this video, we’ll show you how to:

1. Add
2. Style
3. Nest
4. Duplicate

Div blocks, plus show you how to use them as spacers (though we don’t recommend it).

UPDATE: Please note that the “Center” button has moved to the top left of the Spacing UI. Here is a screenshot to help:


Get started with Webflow:



  1. Hey there, thanks a lot for these great tutorials! Really helpful and fun to watch at the same time. I've got a question regarding div-blocks, however. Where exactly is the difference between a container and a div-block? I watched both tutorials but they seem to do exactly the same thing, or am I missing something? Thanks

  2. I know this probably isn't going to get read by anyone, ever, but I feel like my mind just expanded and I now understand 10% more of web design, just thanks to this video. Thank you webflow <3

  3. MAN these tutorials!!!!
    I feel like I already understand the web.
    And the humor is top notch!
    Designers are visual learners, so the motion graphics help a lot.

    The team behind this should get an award or something.

  4. so a section goes across the page (viewpoint), a container goes inside, then why add another div block? cant you use a container as a div block, since you can edit the width and height the SAME as a div block? what is the point of a div block if you have a container?

Leave A Reply

Please enter your comment!
Please enter your name here