0

Estoy empezando con materialize y obvio soy novato, el problema que tengo es que aunque en mi codigo tengo un margin:0 me pone uno en el top, y esta fuera de cualquier container y row... ¿Como quito ese margen de mi background? asi se ve...

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

Asi es como se ve

2

1 respuesta 1

1

como te comentan en el primer comentario, el problema del margen es la etiqueta h1 al poner una regla css tal como:

h1 {
 margin: 0 !important;
}

Se soluciona el problema (importante en éste caso la sentencia !important, ya que de otra forma no se sobrescribirá la regla por defecto), aquí te dejo el ejemplo completo:

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

Saludos!

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.