Why does columns have negative margin?

[xahon]

Is it about Bulma or about the Docs?
Bulma

Is it a bug/feature/question or do you need help?
Question

Overview of the

**This is about the Bulma CSS framework

**I'm using Bulma version [0.4.1] -->
My browser is: Chrome linux latest

**I am sure this issue is not a duplicate

Description

Why are my columns always offset from its original place. I've created <header class='columns'></header> and it went over top bound of document

Steps to Reproduce

1. Create columns class and look on it via inspector

[jgthms]

Because the column items inside have padding:

[nizzac]

@jgthms You didnt really answer @xahon question. Yes the column items inside have padding, but whats the reason for giving .columns a negative margin? This just pushes content outside of a wrapping div and causes horizontal scrolling on smaller screen sizes, or overlapping content vertically.

[jgthms]

It's to keep the content aligned with the rest. You can try removing the padding, but it will cause issues when having columns inside a container, and "normal" content outside out of these columns.

The green line is the edge of the container. If we remove the negative margins, the columns are offset (red line).

[aryno]

The negative margin applied to columns actually (margin-top) leaves the same amount of space between the body and the html as the margin. This could be noticed if you set different background colors on both html and body. Is there any solution for that?

[burlesona]

Just FWIW this creates a dependency that I couldn't find anywhere in the docs:

If you use .columns and you aren't inside a .section, the screen will horizontal scroll.

I think it would be worth (a) documenting this, and potentially (b) changing the behavior to only put the negative margin on .section .columns -- so that it isn't there when you're not inside a .section.

[Janne252]

@jgthms
Having the content align inside .columns with outer content is a great feature. What if instead of having a fixed negative margin, you would align the content by setting the .columns horizontal margin to 0 and removing left/right padding from the first and the last .column?

.columns {
    margin-left: 0;
    margin-right: 0;
}
.columns > .column:first-child {
    padding-left: 0;
}
.columns > .column:last-child {
    padding-right: 0;
}

Edit: Doesn't work with .columns.is-multiline...

[SMerdzhanov]

Hey, I've also noticed this very same issue.

Currently, my solution to this is to manually set margin-left and margin-right to 0px. Unfortunately, there's no other good solution in our case. Otherwise we end up with this horizontal scroll that we've been all talking about ^^.

Any other good solution to this?

[frederikhors]

Any news on this?

[JeanMertz]

I too just ran into this on a webpage using columns inside hero-head. Setting margin-left and margin-right to 0 "solved" (it did mean the padding got bigger, but that's okay in my case) the problem.

[edum18]

add class "is-marginless" if you don't want margins

[derdritte]

@jgthms

.columns {
    margin-left: 0;
    margin-right: 0;
}
.columns > .column:first-child {
    padding-left: 0;
}
.columns > .column:last-child {
    padding-right: 0;
}

Edit: Doesn't work with .columns.is-multiline...

I am not a frontend guy and encountered this issue too. I came out at the same solution, but with multiline-flex it messes with the padding, since on mobile-widths each column gets its own row.
I tried to google for some help on flex-box, but it appears there is currently no way in css to select a column that is in its own row.

[AurelianSpodarec]

You have the entire community saying this is an unusual way, and you still do it. Why? I think it's safe to say the default should be changed. I feel a lot of these "bug", not quite bugs are created by the author himself. Why?

At least some workaround this? Do I need to put 'section' inside footer? Really? Or whatever? Just why. Yes, I've read the 'why', don't think its desired.

A great framework, it is very nice, but these little things are like what the hell.

[arnoutj]

I don't see the point of the vertical margins either. It causes divs with class 'columns' to overlap siblings. Can you elaborate on that?

[dkjain]

I don't see the point of the vertical margins either. It causes divs with class 'columns' to overlap siblings. Can you elaborate on that?

That correct, I also wants to know the rationale behind this.

[geekkun]

Is it possible to set "is-marginless" as a default option to columns? I don't see a point in these margins at all.

[AurelianSpodarec]

Is it possible to set "is-marginless" as a default option to columns? I don't see a point in these margins at all.

Me neither, so do 99% of the community.

You could change the codebase, see if that works. Then just remind yourself or write a "WARNING" on updating codebase do this: XYZ.

I'd assume this change could break other things, but you could tell us how many things you had to fix by adding the "is-marginless" code to the columns or whatever.

[brian-pond]

Many thanks for the "is-marginless" recommendation.

I was stepping through my design, adding border: solid; everywhere, trying to visualize and comprehend why text wasn't properly aligned, and margins were weird. I had nearly given up. Was about remove all "column" from my project, and revert to manually defined Flex Boxes. Then I thought to search for this Issue.

Having read this thread, I still don't understand why negative margins are required. 🤷
But at least I have a workaround now!

[edum18]

negative margins are required because each column has padding. The goal is to keep each column in the same place as it was, also to align columns when they wrap to the next line AND keep a gap between each other when on the same line

[mckennapaul27]

Really don't understand this system. I am using for first time and as soon as I add columns, it creates horizontal scroll. Weird.

[mckennapaul27]

I am having to use columns within a .section and then reset the $section-padding: 12px and this resolves. Very weird.

[mapsmarketing]

I get margin-left and margin-right having negative values to cancel out the padding, but it just doesn't make sense doing this for top and bottom.