px Measurements

Some browsers handle certain measurements differently. If you set your margin to 20px (margin: 20px;), you may display your goal correctly in one browser; however, you may overshoot or undershoot your margins in another browser. The solution? You should only set widths, paddings and other styles with the “px” measurement if you’re making very small adjustments. Note: no more than 5px adjustments should be trusted with the px measurements.

Code: CSS

em Measurements

Alternatively it is better to use em measurements, which are stable and consistent across all browsers. In theory every 1em = 10px; however, this is subjective to the browser you use. Instead of using

           #selector {

           margin-right: 50px;

           }

It would be safer to use

          #selector {

          margin-right: 5em;

          }

If you find a whole number em to not be specific enough for your styles, you can add a decimal to the measurement.

         1.0em = 10px

         1.1em = 11px

         1.2em = 12px

         1.3em = 13px

         etc.

If you keep this in mind, and make use of the “em” measurements, you should not have trouble with browser to browser consistency in regards to your measurements.