So I’ve been using this method since I’ve realized that I don’t always remember everything; and what I’m talking about is using the Mac Screenshot to measure pixels. If you’re like me and use ‘px’ as your measurement rather than ‘em’ then this may be a technique that you can use as well. So lets jump right in…
When I built out a website I write all the code and export all the images by hand so I have an idea of the width and height of different div’s and images are… but I don’t always remember the exact pixels. For example if I’m trying to position a div tag in a certain spot and I have it set to ‘absolute’ positioning and its off by so many pixels, I just hit Shift + Apple + 4 to activate the screenshot cursor and draw a box the size that I need to move the div tag.
When I do that it shows me the width and height of the box I drew so I have a better idea of how far I need to move the div from the top, right, bottom, or left. Then to avoid taking a snapshot just click ‘Esc’ before letting go of your mouse. So in my preparation if I remember that I was planning on moving the div 25 pixels and my screenshot box is showing 24 pixels, it helps to kick-start my memory so I can just edit the CSS. So rather than playing the guessing game in the CSS to try and position the div tag where I want it; or reopening my Photoshop or Fireworks file to draw a slice and measure it out, it’s a quick way to do a measurement on the fly.
It’s not a perfect method or always an exact method but if you’re like me and try and remember different width and height measurement’s it may be a handy technique.
