Spacing Between Rows with Materialize CSS

Answer 1

I figured it out. Put each col within a single row will eliminate the vertical spacing.

<div class="row">
  <div class="col s12" style="text-align: center;">
    foobar
  </div>
  <div class="col s12" style="text-align: center;">
    12345
  </div>
</div>

It is confusing but it works. Conceptually, I would think that a "row" is like a table row, forcing everything inside it to be on a single row regardless of size, but this does work since each col has s12 (full width) size. Hope this answer helps someone else.

Answer 2

I fixed that providing a fixed height to the .cols on the larger screen. If your .col height can be fixed (probably use any other class and fix them or the larger screen or the screen where this problem is caused, which I am sure the medium col is effected the most.).

Here is a snippet which worked for me when there are multiple .col than a 12 grid row can attach to it:

.container {
  padding: 2.4em;
}

.container .row .col.m4 {
  margin-top: 3em;
  height: 42em; //put your required height which fix this by testing.
  width: 33%;
}  


@media screen and (min-width:10px) and (max-width: 640px){
  .container {
    padding: .5em;
  }
  .container .row .col.s12 {
    width: 100%;
    /*height: 45em;*/ We don't need that to be fixed in small devices
  }
}

.container .row {
  margin-top: 1.2em;
}

For your solution, it was simply that you need to put all the .cols in one row, as .row kind of forces the next line. And it is obvious that one row would need to fill it's .row capacity, so it was good fixed by your self.

Answer 3

Use These Methods:

.row .col{
    padding: 0 !important;
}

Then the problem with unwanted space will be go away. Next you can add any other style to your div

Answer 4

I did this to make fast space with clear and margin if i need to.

<div class="clear-10"></div>

.clear, .clear-10, .clear-15 {
  clear: both;
  height: 0; overflow: hidden; /* Précaution pour IE 7 */
}
.clear-10 {
  margin-bottom: 10px
}
.clear-15 {
  margin-bottom: 15px
}