Preventing the div from pushing elements below

[asasass]

As you can see, when you open it, the text gets pushed down, how do you prevent that from happening?

Before:

After:

Code

Edit fiddle - JSFiddle - Code Playground

<style>
      
        .cover {

    width: 260px;
    height: 168px;
    cursor: pointer;
    background-image: linear-gradient( to right, transparent, transparent 83px, #0059dd 83px, #0059dd 86px, transparent 86px, transparent 174px, #0059dd 174px, #0059dd 177px, transparent 177px, transparent 260px), url("https://i.imgur.com/BBYxKcf.jpg");
    border: 3px solid #0059dd;
    font-family: Tahoma;
    font-weight: bold;
    font-size: 30px;
    color: #0059dd;
    cursor: pointer;
    line-height: 100px;
    text-align: center;
  }
      
      
      .links div {
        margin: 0 0 12px 0;
      }
      
      .links a {
        display: block;
        width: 50px;
        height: 50px;
        background-color: green;
        margin: -50px 0 0;
        transition: 0.5s ease-in-out;


      }
      
      a.x1 {
        margin: 0
      }
      
      a.x2 {
        margin-left: 54px
      }
      
      a.x3 {
        margin-left: 108px
      }
      
      a.x4 {
        margin-left: 162px
      }
      
      a.x5 {
        margin-left: 216px
      }
      
      .links a:hover,
      .links a:active,
      .links a:focus {
        background: blue;
      }
      
      .scrl a:visited {
        background: orange;
        color: #000000;
      }
      
      .scrl a:hover {
        background: red;
      }

  .hide {
    display: none;
  }


    </style>

<div class="cover">Links</div>

<div class="test hide">
    <div class="links">
      <div>
        <a class="x1" href="" target="_blank"></a>
        <a class="x2" href="" target="_blank"></a>
        <a class="x3" href="" target="_blank"></a>
        <a class="x4" href="" target="_blank"></a>
        <a class="x5" href="" target="_blank"></a>
      </div>

      <div>
        <a class="x1" href="" target="_blank"></a>
        <a class="x2" href="" target="_blank"></a>
        <a class="x3" href="" target="_blank"></a>
        <a class="x4" href="" target="_blank"></a>
        <a class="x5" href="" target="_blank"></a>
      </div>

      <div>
        <a class="x1" href="" target="_blank"></a>
        <a class="x2" href="" target="_blank"></a>
        <a class="x3" href="" target="_blank"></a>
        <a class="x4" href="" target="_blank"></a>
        <a class="x5" href="" target="_blank"></a>
      </div>
      </div>
      </div>
    
<script>
  (function iife() {
    "use strict";

    function hideClickedElement(evt) {
      var target = evt.target;
      target.classList.add("hide");
      document.querySelector(".test").classList.remove("hide");
    }
    var cover = document.querySelector(".cover");
    cover.addEventListener("click", hideClickedElement, false);
  }());

</script>

[PaulOB]

One way is to remove the bottom margin on the last-child.

.links div:last-child{margin-bottom:0;}

[asasass]

There are other ways?

[PaulOB]

@asasass

There are other ways?

There are always other ways (usually hundreds of them).

For instance you could apply a class to the last div in that sequence <div class="last"> and then set the margin to zero .links .last{margin-bottom:0}.

Or instead of setting a margin-bottom of 12px you could set a margin-top of 12px and then use first:child to negate the first margin.

.links div { margin: 12px 0 0 0;}

.links div:first-child{margin-top:0;}

[asasass]

.links div:last-child{margin-bottom:0;}

Makes the most sense I think.

[ronpat]

@PaulOB

.links div { margin: 12px 0 0 0;}

We mustn’t forget the adjacent sibling selector:

.links div + div { margin: 12px 0 0 0;}

so we don’t have to negate the top or bottom margin.