How to remove margin thoroughly in materialize?

Question

How to remove margin thoroughly in materialize?

Navigation

#1 by (1 votes)

0

I'm starting with materialize and obviously I'm a novice, the problem I have is that although in my code I have a margin: 0 puts me one on the top, and is out of any container and row ... How do I remove that margin? of my background? So it looks ...

.fondo_cabecera{
    height: 860px;
    background-color:red;
    margin:0;
}

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link rel="stylesheet" href="estilos.css">
    <title>Landing Page</title>
</head>
<body>
<header class="fondo_cabecera">
    <div class="container">
        <h1 class="white-text">Hola Mundo</h1>
    </div>
</header>


<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>

css materialize

asked by Gibran Cordoba 22.11.2018 в 06:30

source

1 answer

How to create classes for object / relational mapping? In a select option, another data appears

score 1 · Answer 1

As you commented in the first comment, the margin problem is the h1 tag when putting a css rule such as:

h1 {
 margin: 0 !important;
}

The problem is solved (important in this case the statement !important , since otherwise the default rule will not be overwritten), here is the complete example:

.fondo_cabecera{
    height: 860px;
    background-color:red;
}

h1 {
   margin: 0 !important;
}

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
    <link rel="stylesheet" href="estilos.css">
    <title>Landing Page</title>
</head>
<body>
<header class="fondo_cabecera">
    <div class="container">
        <h1 class="white-text">Hola Mundo</h1>
    </div>
</header>


<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
</body>
</html>

Greetings!