How can I get Code 1, to act the same as Code 2?

Question

http://testpageblog5678.blogspot.com/

My question, how come Code 1, when you click on it, it doesn't stay in place, but when you click on Code 2, it does stay in place. How can I get Code 1, to act the same as Code 2?

On Code 1, do you see how when you click on it, it all moves up, but Code 2, everything stays in place. How can I get Code 1 to act the same?

Code 1

<div style="width:596px" onclick="img=document.getElementById('myDiv8'); img.style.display='block';
    this.style.display='none'">

  <a style="cursor: pointer;display:inline-block; width: 596px; height: 74px; background-color:#000000; border: 5px solid #BF598E;"></a>
</div>

<div id="myDiv8" style="display: none;">

  <div style="background-color:green; color:white; width: 606px; height:84px;">
  </div>
</div>

Code 2

<div style="width:266px" onclick="myDiv=document.getElementById('myDiv'); myDiv.style.display='block'; this.style.display='none'">

  <a style="cursor: pointer;display:inline-block; width: 256px; height: 256px; background-color:red; Border: 5px solid #BF598E;">
  </a>
</div>

<div id="myDiv" style="display: none;">
  <img src="https://i.imgur.com/M5VkVbK.png" style="width: 266px; height: 266px; " />
</div>

Answer 1

<div id="myDiv8" style="display: none; padding-bottom: 5px;">

... or howmuch ever pixels you need to make it keep equal height.

Answer 2

Set these elements to block (because you are setting the hidden elements to block) not inline-block.

<a style="cursor: pointer;display:block; width: 256px; height: 256px; background-color:red; Border: 5px solid #BF598E;">

and

<a style="cursor: pointer;display:block; width: 596px; height: 74px; background-color:#000000; border: 5px solid #BF598E;"></a>

However it's not very nice nice code at all, but I suppose it's just for prove of concept.