コード1はどのようにしてコード2と同じように動作させることができますか？

Question

http://testpageblog5678.blogspot.com/

私の質問は、どのようにコード1、あなたはそれをクリックしたときに、それは場所に滞在していませんが、あなたはコード2をクリックしたとき、それは場所に滞在んが来ます。コード1はどのようにしてコード2と同じように動作させることができますか？

コード1では、クリックするとすべてが上に移動しますが、コード2ではすべてがそのまま残ります。どのようにコード1を同じように動作させることができますか？

コード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>

コード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

インラインブロックではなく、これらの要素を（ブロックする隠し要素を設定しているため）ブロックに設定します。

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

と

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

しかしそれはすべてで非常に素晴らしい素敵なコードではないのですが、私はそれがコンセプトの証明だけのためだと仮定します。

Answer 2

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

...またはどのくらいのピクセルを同じ高さに保つ必要がありますか？