Comunidad de diseño web y desarrollo en internet

Alternativa a "margin-top" en CSS

A veces cuando posicionamos un elemento con CSS, pasa que al querer bajar un título o un párrafo estando insertado en la primera línea de su contenedor, se baja o se corta el contenedor, dejando un espacio no deseado.

En el ejemplo insertaré en el HTML un un header y dentro un título.

Código :

<body>
  <header>
    <h1>Título que quiero mover</h1>
  </header>
</body>


Si separo el h1 de su límite superior:

Código :

*{margin: 0;}
body{background: #BBB;}
header{background: #000;}
h1{margin-top: 40px;}


Pasa esto:




Lo cual es un error. Quiero que el negro comience desde el límite de la ventana. La mayoría dirá: pon un padding-top a header y listo. Sí, es la solución que utilizaba. Pero moviendo y agregando estilos en el inspector de Chrome, hubo algo que lo arregló "sin querer queriendo".

Hay que agregarle un padding-top a header, pero sólo de 1px.

Código :

*{margin: 0;}
body{background: #BBB;}
header{background: #000; padding-top: 1px;}
h1{margin-top: 40px;}


Resultando lo siguiente:




Aunque de todos modos hay que agregar un padding-top.

No se si sea solución por eso en el título del tip le puse "alternativa", siempre se pueden encontrar varios modos de hacer lo mismo.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate