Why is there a margin of 5 pixels between rows of divs?

Hi, I am setting up rows of divs and I don’t want any margins between the boxes. I have removed the margins but a 5px margin persists between the rows.

The only way I seem to be able to remove it is with a -5px top margin. Am I missing a setting to remove the margin?

Thanks! John.

If you want to see the real look of your boxes in Webflow UI, you need to put content in it. Try adding a few paragraphs in each.

Hi Vincent,

Here is the actual design in progress:

https://preview.webflow.com/preview/make-believe-02?preview=bb216cffcd8c898d2aafe2805c6a0342

I am trying to remove the margin between the rows, if I use a -5px margin it messes the scroll bar up!

Can you check the public link? doesn’t work for me…

https://preview.webflow.com/preview/make-believe-02?preview=f2c4098137cff5a972ef7d5988b3c514

I don’t know… (:

It disappears if you pass display:block and float left for example…

I really don’t know why it does this.

@cyberdave any clue?

1 Like

I’m not exactly sure what causes this, it is most likely a default display value either in Webflow or in the user-agent style sheet for the browser.

But there is always a design solution. In your case change your class “post list item” to float left and add padding to the “post list block” class. This will give you the same layout with no gap.

@Davidn - Thanks, that fix works perfectly. Much appreciated. John