Spacing between rows

0

I'm using the Materialize Framework on a website, but when I create two lines it gives me that spacing, does anyone know how to fix it?

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">

  <!-- Compiled and minified JavaScript -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/js/materialize.min.js"></script><title>Document</title></head><body><divclass="row">
		<div class="col s6 red">6</div>
		<div class="col s6 green">6</div>
	</div>

	<div class="row">
		<div class="col s6 blue">6</div>
		<div class="col s6 yellow">6</div>
	</div>
	
	
</body>
</html>
    
asked by anonymous 29.10.2017 / 15:54

1 answer

1

You need to subscribe to the class .row with value 0 and add the !important attribute so that it can subscribe to the default value.

To subscribe the classes you need to create a new css file, and call it after Materialize

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
<link rel="stylesheet" href="/css/meu.css">

.row {
  margin-bottom: 0px !important;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <!-- Compiled and minified CSS -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
  <title>Document</title>
</head>

<body>
  <div class="row">
    <div class="col s6 red">6</div>
    <div class="col s6 green">6</div>
  </div>

  <div class="row">
    <div class="col s6 blue">6</div>
    <div class="col s6 yellow">6</div>
  </div>


</body>

</html>
    
29.10.2017 / 18:50