Spacing Between Rows with Materialize CSS

Question

Using MaterializeCSS, how can I adjust/remove the vertical spacing between rows?

Example code:

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

unwanted space with MaterializeCSS

score 20 · Accepted Answer · answered May 11 '15 at 07:12

20

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.

answered May 11 '15 at 07:12

Crash Override

1,337
3
13
26

2

Thank you for posting the solution yourself. Btw, instead of adding inline CSS for text-align: center, use the CSS helper class "center-align". – Thomas Maurstad Larsson May 29 '15 at 23:45
1

Thanks for the top on using the "center-align" class. Yeah the whole "row" idea was confusing for me, coming from using html table tags for many years, but it finally makes sense to me. Materialize figures out which col's to put next to each other or on separate rows based on the browser window size. It makes it easier to produce a single page that is both mobile and desktop friendly. A "row" is really just a section, that can have about as many col's as you want. – Crash Override Jun 01 '15 at 21:45
6

FYI, I found materializecss has a way to make the space between `
` tags go away. Do a `
`
– Crash Override Jun 07 '15 at 21:38
can't put the cols in single row since i have even/odd row styling. The other solutions with setting the margin-bottom to 0px did not work. – mobibob Sep 15 '20 at 23:30

score 2 · Answer 2 · answered Nov 22 '16 at 15:05

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
}

score 2 · Answer 3 · answered Jan 27 '17 at 14:41

2

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

answered Jan 27 '17 at 14:41

Deepak swain

3,380
1
30
26

May I suggest you add `margin: 0 !important;` to this as well? Otherwise the contents of each column will "float" outside of it. – icecub Jul 29 '18 at 07:25

Animesh Singh · Answer 4 · 2017-05-02T05:34:40.267

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.

Spacing Between Rows with Materialize CSS

4 Answers4

Linked