javascript - javascript 設定幅寸法は要素の位置を変更します

Question

メニューボタンがクリックされたときに JavaScript を使用して中央揃えの a の幅を調整しようとしてdivいますが、幅を変更すると問題ありませんが、要素が約 20px 下にも設定されます。これにより、 の上に大きな空のギャップが生じましたcontentSectionLeftSide。

これが私が持っているものです：

 function setButtonH(e){

    var item = e;
    var items = ["menu_item1","menu_item2","menu_item3","menu_item4"];

    if(e==items[1])
    {
        document.getElementById("contentSectionLeftSide").style.width="600px";
        document.getElementById("contentSectionRightSide").style.width="300px";
        document.getElementById("contentSectionLeftSide").style.height="500px";
        document.getElementById("contentSectionRightSide").style.height="500px";
    }
    else {
        document.getElementById("contentSectionLeftSide").style.width="45%";
        document.getElementById("contentSectionRightSide").style.width="45%";
        document.getElementById("contentSectionLeftSide").style.height="500px";
        document.getElementById("contentSectionRightSide").style.height="500px";
     }
  }

HTML

 <nav id="menu_item">


        <div id="menu_item1" onclick="setButtonH('menu_item1'), menuGo(1)">

                Home

        </div>


        <div id="menu_item2" onclick="setButtonH('menu_item2'), menuGo(2)">

                Interests

        </div>

        <div id="menu_item3" onclick="setButtonH('menu_item3'), menuGo(3)">

                Creations

        </div>


        <div id="menu_item4" onclick="setButtonH('menu_item4'), menuGo(4)">

                Bio

        </div>

    </nav>



 #contentSectionLeftSide{

    padding:10px;
margin-bottom:4px;
background:#EFEFEF;
-webkit-border-radius:5px;  
display:inline-block;
 }
 #contentSectionRightSide{
padding:10px;
margin-bottom:4px;
background:#EFEFEF;
-webkit-border-radius:5px;  
display:inline-block;
}