Effet parallaxe CSS. Comment changer la marge supérieure

Question

Je suis en train de me débattre avec cet exemple d'effet parallaxe en CSS. Comment puis-je changer / supprimer l'espace entre la première image et le bord supérieur de la page? Je "joue" avec le code depuis un certain temps mais je n'ai pas encore trouvé la solution.

/* ============================================================
  STRUCTURE PRIMAIRE
============================================================ */
.container {
  largeur maximale : 960px;
  marge : 0 auto;
}
/* ============================================================
  SECTIONS
============================================================ */
section.module:last-child {
  marge-bas : 0;
}
section.module h2 {
  marge-bas : 40px;
  famille de police : "Roboto Slab", serif;
  taille de police : 30px;
}
section.module p {
  marge-bas : 40px;
  taille de police : 16px;
  poids de police : 300;
}
section.module p:last-child {
  marge-bas : 0;
}
section.module.content {
  rembourrage : 40px 0;
}
section.module.parallax {
  hauteur : 600px;
  position du fond : 50% 50%;
  répétition du fond : no-repeat;
  fixation du fond : fixe;
  taille du fond : couverture;
}
section.module.parallax h1 {
  couleur : rgba(255, 255, 255, 0.8);
  taille de police : 48px;
  hauteur de ligne : 600px;
  poids de police : 700;
  alignement du texte : centre;
  transformation du texte : majuscules;
  ombre de texte : 0 0 10px rgba(0, 0, 0, 0.2);
}
section.module.parallax-1 {
  image de fond : url("http://www.fonstola.ru/pic/201112/2560x1600/fonstola.ru-63832.jpg");
}
section.module.parallax-2 {
  image de fond : url("http://hdoboi.net/uploads/hd/95263_krasivyiy_osenniy_peyzaj.jpg");
}
section.module.parallax-3 {
  image de fond : url("http://drobs.ru/opyat/8/peyzazh_priroda_holmy_derevya_zelen_tuman_rassvet_solnce_5576x3087.jpg");
}

@media all and (min-width: 600px) {
  section.module h2 {
    taille de police : 42px;
  }
  section.module p {
    taille de police : 20px;
  }
  section.module.parallax h1 {
    taille de police : 96px;
  }
}
@media all and (min-width: 960px) {
  section.module.parallax h1 {
    taille de police : 160px;
  }
}

    Serene

    Lorem Ipsum Dolor
    Lorem ipsum dolor sit amet, consectetur adipisicing elit...

    Rise

    Lorem Ipsum Dolor
    Lorem ipsum dolor sit amet, consectetur adipisicing elit...

    Calm

    Lorem Ipsum Dolor
    Lorem ipsum dolor sit amet, consectetur adipisicing elit...

Answer 1

Le problème décrit ci-dessus est causé par des marges qui se chevauchent. Référez-vous à: https://developer.mozilla.org/fr/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing

Vous pouvez le résoudre en supprimant la marge par défaut en haut du premier élément h1 et la marge par défaut du body. Référez-vous au code ci-dessous:

/* ============================================================
  STRUCTURE PRIMAIRE
============================================================ */
.container {
  max-width: 960px;
  margin: 0 auto;
}
/* ============================================================
  SECTIONS
============================================================ */
section.module:last-child {
  margin-bottom: 0;
}
section.module h2 {
  margin-bottom: 40px;
  font-family: "Roboto Slab", serif;
  font-size: 30px;
}
section.module p {
  margin-bottom: 40px;
  font-size: 16px;
  font-weight: 300;
}
section.module p:last-child {
  margin-bottom: 0;
}
section.module.content {
  padding: 40px 0;
}
section.module.parallax {
  height: 600px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}
section.module.parallax h1 {
  color: rgba(255, 255, 255, 0.8);
  font-size: 48px;
  line-height: 600px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
section.module.parallax-1 {
  background-image: url("http://www.fonstola.ru/pic/201112/2560x1600/fonstola.ru-63832.jpg");
}
section.module.parallax-2 {
  background-image: url("http://hdoboi.net/uploads/hd/95263_krasivyiy_osenniy_peyzaj.jpg");
}
section.module.parallax-3 {
  background-image: url("http://drobs.ru/opyat/8/peyzazh_priroda_holmy_derevya_zelen_tuman_rassvet_solnce_5576x3087.jpg");
}

/* Ajouté pour supprimer la marge en haut de la page et la marge par défaut de body */
.no-margin-top {
   margin-top: 0;
}

body {
    margin: 0;
}

@media all and (min-width: 600px) {
  section.module h2 {
    font-size: 42px;
  }
  section.module p {
    font-size: 20px;
  }
  section.module.parallax h1 {
    font-size: 96px;
  }
}
@media all and (min-width: 960px) {
  section.module.parallax h1 {
    font-size: 160px;
  }
}

    Serein

    Lorem Ipsum Dolor
    Lorem ipsum dolor sit amet, consectetur adipisicing elit...

    Élévation

    Lorem Ipsum Dolor
    Lorem ipsum dolor sit amet, consectetur adipisicing elit...

    Calme

    Lorem Ipsum Dolor
    Lorem ipsum dolor sit amet, consectetur adipisicing elit...