Geek Answers Handbook

CSS spacing between lines

Using MaterializeCSS, how can I adjust / remove vertical line spacing?

Code example:

<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

+7
materialize
source share
4 answers

I get it. Place each col within the same row to eliminate vertical distance.

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

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

+14
source share

I did this to make a quick space with clear and margins if I needed.

 <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 }
+1
source share

Use these methods:

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

Then the problem with unwanted space will disappear. Then you can add any other style to your div

0
source share

I fixed that fixed height .col on the big screen. If the .col height can be fixed (maybe use any other class and fix them, or the larger screen or the screen where this problem is caused, and I'm sure the middle column works the most.).

Here is a snippet that worked for me when there are several .col than 12 grid lines can join 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 simple that you need to put all .col in one line, and .row is the power of the next line. And obviously, one line would have to fill it with .row capacity, so it was fixed by itself.

0
source share

More articles:


All Articles