Why does my margin-top move the entire section down?

Question

I've made two separate sections, one for an image slider and one for the "About Us" section which is more of a pre-footer, I wanted to push the text down a bit, however, whenever I give the text in the "About us" section a margin-top, it pushes down the entire "About us" section instead of the text only, any ideas on how to fix this?

.img-slider-section {
    border-bottom: 1px solid rgb(15, 13, 13);
    border-top: 1px solid rgb(15, 13, 13);
}

.slider {
    position: relative;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    color: #fff;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    margin-top: 1em;
}

.slide.current {
    opacity: 1;
}

.slide .content {
    position: absolute;
    bottom: 70px;
    left: -600px;
    opacity: 0;
    width: 600px;
    background-color: rgba(29, 28, 28, 0.945);
    border: 1px solid red;
    border-radius: 5px;
    color: rgb(3, 3, 3) transparent;
    padding: 35px;
}

.slide .content h1 {
    margin-bottom: 10px;
    color: red;
    font-family: 'Cinzel Decorative',sans-serif;
}

.content p {
    font-family: 'Cinzel Decorative',sans-serif;
    
}

.slide.current .content {
    opacity: 1;
    transform: translateX(600px);
    transition: all 0.7s ease-in-out 0.3s;
}

.buttons button#next {
    position: absolute;
    top: 210%;
    right: 15px;
}

.buttons button#prev{
    position: absolute;
    top: 210%;
    left: 12px;
}

.buttons button {
    border: 2px solid rgb(129, 7, 7);
    background-color: transparent;
    color: rgb(255, 0, 0);
    cursor: pointer;
    padding: 13px 15px;
    outline: none;
}

.buttons button:hover {
    background-color: rgba(255, 0, 0, 0.774);
    color: rgba(255, 255, 255, 0.863);
    transition: 0.3s ease;
}

.buttons button:not(:hover) {
    transition: 0.3s ease;
}

/* FOOTER */

.pre-footer {
    width: 100%;
    height: 25vh;
    background: #fff;
}

.about-us {
    font-family: 'Oswald',sans-serif;
    text-align: center;
    width: 50%;
    margin: 0 auto;
}

.ABOUT-H {
    font-family: 'Cinzel Decorative',sans-serif;
    font-weight: 700;
}

.ABOUT-text {
    font-family: 'Oswald',sans-serif;
}


  
  /* Background Images */
   
  .slide:first-child {
    background: url('../IMG/background-image-1.jpg') no-repeat
      center top/cover;;
  }
  .slide:nth-child(2) {
    background: url('../IMG/background-image-2.jpg') no-repeat
      center top/cover;
  }
  .slide:nth-child(3) {
    background: url('../IMG/background-image-3.jpg') no-repeat
      center top/cover;
  }
  .slide:nth-child(4) {
    background: url('../IMG/background-image-4.jpg') no-repeat
      center top/cover;
  }
  .slide:nth-child(5) {
    background: url('../IMG/background-image-5.jpg') no-repeat
      center top/cover;
  } 
  .slide:nth-child(6)  {
    background: url('../IMG/background-image-6.png') no-repeat
      center center/cover;
  }

<section class="img-slider-section">
        <div class="slider">
            <div class="slide current">
              <div class="content">
                <h1>CHALLENGING GAMEPLAY</h1>
                <p>
                    No two DEVOUR playthroughs are ever the same. To stop Anna, you’ll need a focused team and perfect execution, with a single session lasting up to an hour.
                </p>
              </div>
            </div>
            <div class="slide">
              <div class="content">
                <h1>REPLAYABILITY</h1>
                <p>
                    Locked doors, goats and item spawns are randomized, ensuring that no two games are the same. What's more, DEVOUR's unpredictable AI ups the game, making you second guess each and every move.
                </p>
              </div>
            </div>
            <div class="slide">
              <div class="content">
                <h1>ESCALATING DIFFICULTY</h1>
                <p>
                    Anna's rage and speed increase as the game progresses, as does the number of demons Azazel spawns to stop you. Your only means of defence is your UV flashlight.
                </p>
              </div>
            </div>
            <div class="slide">
              <div class="content">
                <h1>MULTIPLAYER FEATURES</h1>
                <p>
                    Make use of our in-game positional voice chat. Bring friends, or find other players using the server browser.
                </p>
              </div>
            </div>
            <div class="slide">
              <div class="content">
                <h1>EXORCISE ANNA</h1>
                <p>
                    Your goal is to break Azazel's hold over Anna. To do this you'll need to find gasoline, a fire pit, and enough ritual goats to burn.
                </p>
              </div>
            </div>
            <div class="slide">
              <div class="content">
                <h1>NIGHTMARE MODE</h1>
                <p>
                    Beat the game without breaking a sweat? Try Nightmare mode for the ultimate challenge.
                </p>
              </div>
            </div>
          </div>
          <div class="buttons">
            <button id="prev"><i class="fas fa-arrow-left"></i></button>
            <button id="next"><i class="fas fa-arrow-right"></i></button>
          </div>
          </section>

          <div class="pre-footer">
            <div class="about-us">
              <h2 class="ABOUT-H">ABOUT STRAIGHT BACK GAMES</h2>
              <p class="ABOUT-text">DEVOUR is the second game from Straight Back Games, an independent game developer started in 2019 by Joe Fender and Luke Fanning. The developers' passion for frustratingly difficult games and exciting co-op experiences was the drive behind its creation. Collaborators also include family members Andrew Fender (puzzle design), Hannah Headden (story and script) and Peter Fender (original music score).</p>
            </div>
          </div>
          
          <script src="JS/main.js"></script>
        </body>

How it looks normally

How it looks with margin-top

score 4 · Accepted Answer · answered Apr 09 '21 at 12:42

What you are observing is called collapsing margins and is a rather confusing, hard-to-understand CSS feature that has given web developers headaches for decades.

See this simple example:

.parent {
  background-color: #ddd;
  height: 400px;
  width: 400px;
}

.child { 
  background-color: #666;
  height: 200px;
  margin-top: 100px;
  width: 200px;
}

<div class="parent">
  <div class="child"></div>
</div>

As you can see, the margin-top of the child does not, as one might expect, push the child 100px down inside the parent, but instead the margin translates to the parent, pushing the parent down 100px and leaving the position of the child relative to the parent unaltered.

The standard way to fix that is to give the parent a minimal padding-top (which will prevent margin collapsing from occuring):

.parent {
  background-color: #ddd;
  height: 400px;
  padding-top: 1px;
  width: 400px;
}

.child { 
  background-color: #666;
  height: 200px;
  margin-top: 99px;
  width: 200px;
}

<div class="parent">
  <div class="child"></div>
</div>

Why does my margin-top move the entire section down?

1 Answers1