1

Estoy trabajando con MVC 5 y en mi Layout "_Layout.cshtml" quiero poner un header

<header>
    <div class="jumbotron">
        <h2>Bienvenido</h2>
    </div>
</header>

Sin embargo, el header no aparece en el limite de la ventana sino un poco mas abajo:

introducir la descripción de la imagen aquí

así que intente con esto:

<style>
    .jumbotron
    {
        margin-top: 0;
    }
</style>

y siguió sin funcionar, pero si modifico la propiedad a margin-top: 50px; o etc, si hace el cambio ¿Alguna idea del por qué?

1
  • Te fijaste que dice el padding? hace click derecho sobre el "Bienvenidos" y anda a "Inspeccionar Elemento", a la derecha te va a mostrar el css el 26 feb. 2016 a las 18:29

2 respuestas 2

1

Aca tenes 2 temas importantes

1) el body tiene un margin y padding por defecto. para solucionarlo podes hacer lo siguiente con css:

body{
  margin:0 auto;
  padding:0;
}

2) Los tag h1,h2,etc tiene también un margin por defecto. También se solucion con css.

 .jumbotron h2{
    margin:0;
    padding:0;
  }

Te dejo aca un codigo HTML que me funciona correctamente.

<html>
  <head>
    <meta charset="utf-8">

    <style>
      body{
        margin:0 auto;
        padding:0;
      }
      .jumbotron{
        background-color: red;
      }
      .jumbotron h2{
        margin:0;
        padding:0;
      }
    </style>
  </head>
  <header>
    <div class="jumbotron">
        <h2>Bienvenido</h2>
    </div>
  </header>

</html>

0

Lo primero que puedo marcar es que el Jumbotron de bootstrap no de define dentro del tag <header> deberías estar en el <body>

Bootstrap Jumbotron

Por otro lado ese espacio puede generarse porque por defecto la página tiene un margin establecido, el cual podrias quitar con css si defines

body {    
   margin: 0;
   padding: 0;
}
2
  • quite el jumbotron del header, deje solo el <div> y defini el margin del body, disminuyo la separacion pero sigue sin estar en el limite de la ventana
    – Akiva
    el 26 feb. 2016 a las 19:01
  • 1
    Listo, lo solucione añadiendo un padding-top: 1px; al header
    – Akiva
    el 26 feb. 2016 a las 19:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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