Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The purpose of -.25em? & best way to add gutter bottom? #50

Open
jezthomp opened this issue May 24, 2016 · 1 comment
Open

The purpose of -.25em? & best way to add gutter bottom? #50

jezthomp opened this issue May 24, 2016 · 1 comment

Comments

@jezthomp
Copy link

What is the purpose of the margin right -.25em out of interest ?

Also the best way to add the same gutter below each column is to simply add it into..

.#{$toast-grid-column-namespace} { padding-bottom: $toast-gutter-width; }

Or is there another more intuitive method built in?

@tdaym
Copy link

tdaym commented Apr 18, 2018

What is the purpose of the margin right -.25em out of interest ?

Using "inline-block", it often becomes the problem that Gap is made on the right side when I use element {$toast-grid-column-namespace}.
It can avoid using the negative-margin(margin-right: -.25em;).
ex)
https://css-tricks.com/fighting-the-space-between-inline-block-elements/

And I think that your idea is a good idea.
In that case, how about that I add "negative-maegin-bottom" because the bottom element has Gap.

.#{$toast-grid-namespace} {
  list-style: none;
  margin-left: -$toast-gutter-width;
  margin-bottom: -$toast-gutter-width;
}
.#{$toast-grid-column-namespace} {
  box-sizing: border-box;
  display: inline-block;
  margin-right: -.25em;
  min-height: 1px;
  padding-left: $toast-gutter-width;
  vertical-align: top;
  padding-bottom: $toast-gutter-width;
}

or

.#{$toast-grid-namespace} {
  list-style: none;
  margin-left: -$toast-gutter-width;
  margin-top: -$toast-gutter-width;
}
.#{$toast-grid-column-namespace} {
  box-sizing: border-box;
  display: inline-block;
  margin-right: -.25em;
  min-height: 1px;
  padding-left: $toast-gutter-width;
  vertical-align: top;
  padding-top: $toast-gutter-width;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants