Search code examples
materialize

Spacing Between Rows with Materialize CSS


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


Solution

  • 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.