Chrome will increase the font size when zooming out

Question

I have the following code :

CSS

#container{
    font-size: 0.625em;
}

#div1 {
    width: 200px;
    height: 200px;
    background-color: green;
}
         


        

Answer 1

The divs has different width.

10em is not always equivalent to 100px

try setting the same width (em or px)

An em is equal to the current font-size, for instance, if the font-size of the document is 12pt, 1em is equal to 12pt

One pixel is equal to one dot on the computer screen

refer this page for documentation

your updated fiddle here

body {
            font-size: 0.625em;
        }

        #div1 {
            width: 200px;
            height: 200px;
            background-color: green;
        }

        #div2 {
            width: 200px;
            height: 200px;
            background-color: red;
        }

update

if it doesn't work try with this css property

-webkit-text-size-adjust: none;

Answer 2

See, you used px for the first div and em for the second.

Chrome has a minimum font size and fonts smaller than it will be displayed as that font size only. (see your Chrome Settings)

Now, using div with px, the box goes on and becomes even smaller on zooming at 33% (or 25% or 50%) but using em, the box remains the same size when the minimum font-size has been reached. see

em is useful on browsers which implement zooming by scaling the font size like Chrome. So if you size all your elements using em they scale accordingly. em makes sure that the whole content is displayed as it is even if the size of div changes (on zooming). Hope you got your answer :)

EDIT

In IE10, there's no minimum font size in settings as in GC35. So the em px render like each other.