Img is moving when deactivate display:none on another img on chrome?-CodePudding

I would like to understand why the img in the first div is moving a little to the left when deselecting "display:none" in the second div. I am using chrome for my tests

<!doctype html>
<html>
<head>
</head>
<body>
    <button onclick="let img=this.parentNode.querySelector('div:nth-of-type(2)>div>img');img.style.display=img.style.display?'':'none'">toggle</button>
    <div style="width:100%">
        <div >
            <img src="//static.aujardin.info/img/menu/logo-aujardin.png" width="260" height="120" style="margin:0 auto;display:block">
        </div>
    </div>
    <div style="width:100%">
        <div style="width:1200px">
            <img style="display:none" src="https://static.aujardin.info/cache/th/adb/detox-eau-citron-menthe-600x450.jpg" width="600" height="450"/> 
        </div>
    </div>
</body>
</html>

I am trying to find a solution to avoid this!

CodePudding user response：

Does your browser add a vertical scrollbar when your second image is displayed?

That would be why if so. The first image is set to center itself in the available width, which the scrollbar takes a piece out of.

CodePudding user response：

Thanks to LandarVargan I fixed this problem on my website by adding

body{overflow-y:scroll}

Then the vertical scrollbar is always displayed and so my logo is no more moving when a page is displayed.