Padding bug


Something went wrong with the padding. (Blocs 3.0.7 and 3.1.0.b4)
When I set the padding to “none”, there is a padding.

Cyan - Padding: Small 20px
Magenta - Padding: None
Yellow - Padding: Small 20px

Here is the result:

padding_bug.bloc (198.8 KB)

@Norm: Please have a look.

Try placing content into the empty areas.

I tried. I experienced the same error even then.

This works well 2.6.5

Blocs 2.6.5 - settings:
Cyan - Padding: Small 20px
Magenta - Padding: None
Yellow - Padding: Small 20px


This is an existing project, which works well under 2.6.5

I just wanted some text modification.
This problem was discovered during migration.

It’s likely due to the usage of Flexbox in bootstrap4.

Are you doing this to add a border between blocs?

Hi …
I also have that problem. And also have the problem when the padding is set for example to 50 px. Always between each bloc … only see on internet explorer …also at the Blocsapp homepage …a few days / weeks ago a send a bug @Norm
any solution for this with the Internet explorer ?

update: when I for example put a heading inside there is no padding bug ( watch on safari )
still there problem with the internet explorer … with content or without content …

update1: I often use a bloc and set a background image …set a class and a hight ( for example 500 px ) and use no text inside … than I also have a padding bug …set the padding to 20px but still the same …

The bootstrap4 doesn’t know the concept of none?

No, there is no border.
Here is the settings:
Cyan - Padding: Small 20px
Magenta - Padding: None
Yellow - Padding: Small 20px

Can you check the “padding_bug.bloc” which you can find in the first post?
Pleas have a look!

Hi @Ben

I have downloaded your Blocs file and added a card to the magenta section.

Result no white lines for me as per the below video. I think Blocs does not like none-padding with empty content, which make sense at least to me.

Screen Recording 2019-01-24 at (2.2 MB)

Thanks, but I would like to add a narrow transparent shadow.
There is a white padding.

Here is the transparent shadow, which I would like to use.

Here is my result:

Hi @Ben

Can you resend the Bloc file with the shadow, I am not sure I understand what you are aiming for ? Will there be anything in that Bloc ?


I’ll send you in pm.
Thanks in advance.

@Ben okay will have a look.

1 Like

@MDS Thank you MDS. You choose to solve the problem with a “img-margin-top” custom class.
It worked well in the Blocs 2 before, without custom class.

@Norm I still think so this is a bug. Why I need to use custom class when I selected the padding is none.
Whenever I insert an image and the padding is none there is a white line.
(If the image is very narrow the white line appear top and bottom too.)
So doesn’t fit.

Hi @Ben

Well bugs are bugs…

To my knowledge, there is not one single software that is immune to these little bugs. :bug:

That said, this is why as a non developer I try to work around them and I believe this is one of the best approach in the software industry.


Yeah it’s a bug. But it comes from bootstrap 4 and it’s use of flexbox. Some elements in bootstrap create the extra padding below when they use display classes for layout. Try left aligning the image and the space will go away. The centering class from bootstrap that is applied to images by default also causes the white space. I found a bunch of scenarios that cause this on no padding Blocs all caused by the bootstrap layout classes.

Also, this is just my opinion but using an entire bloc just to add a divider is wasteful, that’s extra code bloat the browser reads that could be added with a class to apply a border on the lower bloc edge.

I’m working on a bunch of these issues right now so I’ll try to come up with a solution that doesn’t break other areas.

1 Like

I thinking always as a designer not a programmer.

@Norm Thank you for your feedback.

Somewhat more than a divider. Get a new bloc because of the mobile view.

I’m waiting for this.

1 Like

I am not a programmer either thus I think out of the box and find workarounds.


Is there an official issue/bug report on this via Bootstrap’s repo?

Not nearly as much as the extraneous resources left inside the bootstrap css/js framework, jquery, etc., files that go largely unused by most sites. :stuck_out_tongue_winking_eye:

1 Like
  1. I’m not sure.

  2. Agree. I’m going to try and get Blocs sites as light as possible after reading a bunch of posts about how bloated some resources are.


An example @Norm would be fonts. The sheets are applied site wide. It would be better to be page specific if possible. No need loading google fonts on pages that don’t call for them.

I’ve tracked the cause down, it looks like its the main Bloc container. I’ve fixed it but Im unsure as to whether it has broken anything else as it’s a class that the foundation of pages are built on.

I’ll keep testing and see if its suitable for inclusion in 3.1 build 6.