Line spacing

Asked

Viewed 999 times

0

I’m using the Materialize Framework on a website, but when I create two lines it gives me this spacing, someone knows how to fix?

<!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>
	<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>

html css html5 css3 materialize

1 answer

1


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

To subscribe to the classes you need to create a new css file, and call it after the 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>

Browser other questions tagged html css html5 css3 materialize

You are not signed in. Login or sign up in order to post.