Google Chrome - Rendering differences when zooming in/out

Question

When I created some code, I noticed something strange. The DOWNLOAD button touches the end of the left wall, there is no gap (500% zoom). But when I decrease the zoom from 500%

Answer 1

this is display:inline-block; issue because of inline-block use some spacing Use float: left instead of display: inline-block,

Use this css

.modelerInputReportDiv span {
     float:left;
}
.modelerInputReportDiv button {
     float:left;
     vertical-align: middle;
        cursor: pointer;
        font-weight: bold;
        padding: 8px;
        color: #fff;
        border: 1px solid #ccc;
        background: #0066cc;
        margin-left: 5px;
}