[    ](https://www.facebook.com/sharer/sharer.php?u=https://www.skvare.com/markdownify/node/67&title=Tips%20For%20Using%20Measurements%20While%20Theming "Share to Facebook") [    ](https://www.linkedin.com/sharing/share-offsite/?url=https://www.skvare.com/markdownify/node/67 "Share to Linkedin") [    ](mailto:?subject=Tips%20For%20Using%20Measurements%20While%20Theming&body=https://www.skvare.com/markdownify/node/67 "Share to Email") 

 

 

#  Tips For Using Measurements While Theming 

 

 

 ## **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.